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

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>