Skip to content
Home

HelpButton

Info
Demos
Properties
Events

Import

import { HelpButton } from '@dnb/eufemia'

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

Code Editor
<HelpButton>Text</HelpButton>

Help button inside a suffix

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

Help button in different sizes

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

Help button with an information icon

Code Editor
<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
Code Editor
<span>
  Text <HelpButton>Text</HelpButton> Text
</span>