HelpButton

Description

A help button with custom semantics, helping screen readers determine the meaning of that button. For the visual part, it is a default icon button with the question icon as a basis.

This button is used as the default Modal trigger button.

Demos

Default HelpButton

<HelpButton>
Text
</HelpButton>

Help button inside a suffix

<Input
size={10}
placeholder="Input ..."
suffix={<HelpButton title="Custom title">Text</HelpButton>}
/>

Help button in different sizes

<HelpButton title="Custom title">Text</HelpButton>
<HelpButton
size="small"
left
on_click={() => {
console.log('on_click')
}}
>Text</HelpButton>

Help button with an information icon

<HelpButton icon="information" tooltip="More info">
<Dl>
<Dt>Term</Dt>
<Dd>Description</Dd>
<Dd>Description</Dd>
<Dt>Term</Dt>
<Dd>Description</Dd>
</Dl>
</HelpButton>

Help button used inside text

Text Text
Text <HelpButton>
Text
</HelpButton> Text