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 the button. Visually, it is a default icon button with the question icon as its basis.

This button is used as the default Modal trigger button.

Relevant links#

Related components#

HelpButton is part of the Actions category. Other components for similar needs:

  • Anchor — to take people to another page, section, or website.
  • Button — when people need to start, confirm, or submit an action.
  • Menu — when people need to choose from a small list of actions or links.

Demos#

Default HelpButton#

<HelpButton>Text</HelpButton>

Help button used in form help (inline)#

My form

<Form.Handler>
  <Form.Card>
    <Form.SubHeading>My form</Form.SubHeading>
    <Field.Email
      help={{
        title: 'Email help',
        content: (
          <>
            Enter your{' '}
            <TermDefinition content="Email is a method of exchanging messages between people using electronic devices.">
              email
            </TermDefinition>{' '}
            address
          </>
        ),
      }}
    />
  </Form.Card>
</Form.Handler>

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
  onClick={() => {
    console.log('onClick')
  }}
>
  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>
Suggest an edit