Skip to content
Home

HelpButton

Info
Demos
Properties
Events

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
<span>

  Text <HelpButton>Text</HelpButton> Text

</span>