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>