---
title: Help button
description: Use HelpButton when a short explanation should be available next to a label or control.
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.176Z
checksum: 3a4703bb68c09100204d64b4c5d20d28fe172c5fe6df3e18859cbe2c2f526ef9
---

# Help button

## Import

```tsx
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](/web/components/button#icon-button) with the `question` icon as its basis.

This button is used as the default [Modal trigger button](/web/components/modal/demos).

## Relevant links

- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=43836-5699)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/help-button)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/web/components/help-button)


## Related components

Help button is part of the [Actions](/web/components/overview/#actions) category. More components in this category:

- [Button](/web/components/button/) – when people need to start, confirm, or submit an action.
- [Menu](/web/components/menu/) – when people need to choose from a small list of actions or links.
- [Vipps wallet button](/web/patterns-and-extensions/vipps-wallet-button/) – A branded Vipps wallet call-to-action button extension.


## Demos

### Default HelpButton


```tsx
render(<HelpButton>Text</HelpButton>)
```


### Help button used in form help (inline)


```tsx
render(<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


```tsx
render(<Input label="Label" labelSrOnly size={10} placeholder="Input ..." suffix={<HelpButton title="Custom title">Text</HelpButton>} />)
```


### Help button in different sizes


```tsx
<HelpButton title="Custom title">Text</HelpButton>
<HelpButton size="small" left onClick={() => {
console.log('onClick');
}}>
    Text
  </HelpButton>
```


### Help button with an information icon


```tsx
render(<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


```tsx
render(<span>
      Text <HelpButton>Text</HelpButton> Text
    </span>)
```



  
```tsx
<ComponentBox scope={{
Field
}}>
    <Dialog title="Inline help" triggerProps={{
  'data-testid': 'inline-help-modal-0'
}}>
      <Field.String label="Name" help={{
    title: 'About your name',
    content: 'Enter your full name.'
  }} />
    </Dialog>
  </ComponentBox>
<ComponentBox scope={{
Field,
Drawer
}}>
    <Drawer title="Inline help" triggerProps={{
  'data-testid': 'inline-help-modal-1'
}}>
      <Field.String label="Name" help={{
    title: 'About your name',
    content: 'Enter your full name.'
  }} />
    </Drawer>
  </ComponentBox>
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties


```json
{
  "props": {
    "children": {
      "doc": "The content to show.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "title": {
      "doc": "The content title. Defaults to `Hjelpetekst` (HelpButton.title).",
      "type": "string",
      "status": "optional"
    },
    "icon": {
      "doc": "To be included in the button. [Primary Icons](/collections/icons) can be set as a string (e.g. `icon=\"information\"`), other icons should be set as React elements.",
      "type": [
        "string",
        "React.ReactNode"
      ],
      "status": "optional"
    },
    "render": {
      "doc": "Accepts a function that returns a valid React Element. See example below.",
      "type": "function",
      "status": "optional"
    },
    "[Button](/web/components/button/properties)": {
      "doc": "All button properties.",
      "type": "Various",
      "status": "optional"
    },
    "[Space](/web/layout-and-typography/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```


## Translations


```json
{
  "locales": [
    "da-DK",
    "en-GB",
    "nb-NO",
    "sv-SE"
  ],
  "entries": {
    "HelpButton.ariaRole": {
      "nb-NO": "Hjelp-knapp",
      "en-GB": "Help button",
      "sv-SE": "Hjälp-knapp",
      "da-DK": "Hjælp-knap"
    },
    "HelpButton.title": {
      "nb-NO": "Hjelpetekst",
      "en-GB": "Help text",
      "sv-SE": "Hjälptext",
      "da-DK": "Hjælpetekst"
    }
  }
}
```


## How to use `render`


```tsx
render(<HelpButton title="Title" render={(children, props) => <Dialog triggerProps={props} className="your-class">
          {children}
        </Dialog>}>
      Help text
    </HelpButton>)
```

## Events


```json
{
  "props": {
    "[Button](/web/components/button/events)": {
      "doc": "Accepts all Button events.",
      "type": "Various",
      "status": "optional"
    }
  }
}
```