Button#

Description#

Use Button to start, confirm, or submit an action, such as "Add account" or "Save changes". Use Anchor to navigate to another page or section.

Import#

import { Button } from '@dnb/eufemia'

Accessibility#

Buttons support keyboard interaction: Tab moves focus, and Enter or Space activates the button. Keep the focus indicator visible and use a label that describes the action.

For buttons without visible text, follow the icon-only button guidance.

Relevant links#

• Figma
• Source code
• Docs code

Related components#

Button is part of the Actions category. More components in this category:

• Help button — when a short explanation should be available next to a label or control.
• Menu — when people need to choose from a small list of actions or links.
• Vipps wallet button — A branded Vipps wallet call-to-action button extension.

Typography#

DNB button labels use DNB Sans Text Regular, matching the Eufemia Web Figma library. This applies to primary, secondary, tertiary and unstyled buttons. Built-in selection controls, navigation and clickable file names also retain Regular. Other brands retain their existing typography. The text font is shared with other interface content; Display is reserved for expressive headlines.

DNB labels use normalized font metrics and no additional upward adjustment. Sbanken retains its existing label adjustment for Roboto. The font weight and vertical alignment are separate choices; changing the weight is not a centering correction.

Demos#

Choose a variant#

Choose the visual emphasis to match the importance of the action.

• Primary: the main action. Use at most one in a given context.
• Secondary: other actions alongside the primary action.
• Tertiary: a less prominent action with an icon.

Expand Code below each example to edit it or copy the implementation.

Text buttons#

Use a short label that describes the action. Set variant="secondary" for a secondary action.

Primary button#

Secondary button#

Buttons with icons#

Set icon to add an icon. Icons appear on the right by default. Use iconPosition="left" to place one before the label.

Primary button with icon#

Primary button with icon on left#

Tertiary button#

Use variant="tertiary" with an icon for a less prominent action. The label can be plain text or a React element.

Icon above the label#

Use iconPosition="top" to place the icon above the label.

Wrapping long labels#

Wrapping is opt-in because button labels should be short and easy to scan. If a label is long enough to need a line break, consider shortening it or using a different component that better fits the content and interaction.

Set wrap to allow the label to span multiple lines. The icon stays aligned with the top of the text.

Icon button#

Use buttons with visible text by default. Only use an icon-only button when the action and what it affects are immediately clear to your users, without a tooltip. If there is any doubt, keep the text label.

Choose an icon that fits the context#

Use an existing Eufemia icon and keep its meaning consistent throughout your application. Even in the contexts below, only omit the text label if the action and its scope are unambiguous to your users.

Use visible text when#

• The action is important or difficult to undo, such as "Send payment" or "Delete account". A trash icon does not explain the scope of a deletion.
• The icon could mean several things. A plus could mean add an item, create an account, or zoom in. Use a label such as "Add account".
• People need a tooltip to understand the action. Tooltips can help, but should not be the only explanation, especially on touch screens.

Limited space, including on smaller screens, is not enough reason to remove a text label.

Name the action#

Every icon-only button needs an accessible name. Describe the action, such as "Delete invoice.pdf", rather than the shape, such as "Trash icon".

Set aria-label and add a matching tooltip for hover and keyboard focus. A tooltip alone does not provide an accessible name in Eufemia.

<Button icon="close" aria-label="Close" tooltip="Close" />

Alternatively, title supplies the accessible name automatically for icon-only buttons.

The labels above the buttons identify the sizes and states.

Sizes#

Use size to set the button dimensions.

Primary button sizes#

Use default or large for primary buttons.

Secondary button sizes#

Use default or large for secondary buttons.

Tertiary button sizes#

Use default (recommended) or large for tertiary buttons with text.

Icon button sizes#

Icon-only buttons support small, medium, default and large, including the tertiary variant. When size is omitted, an icon-only button uses medium.

size controls the button dimensions, while iconSize controls the icon dimensions. For example, this small tertiary button is 1.5rem square (24 px at the default root font size), with a 1rem (16 px) icon:

<Button
  variant="tertiary"
  size="small"
  icon="add"
  iconSize="default"
  title="Add attachment"
/>

Anchor button#

Set href when navigation needs the visual emphasis of a button. Button renders an anchor element in this case. Prefer Anchor for ordinary links.

Disabled buttons#

Set disabled to make an action unavailable. Prefer keeping actions available where possible. A disabled button alone does not explain what the user needs to do next.

Error state#

Set status="error" to indicate an error state. When an action fails, also explain the problem and how to recover. A color change alone is not enough.

Button on dark surface#

Use Section or Theme.Context with surface="dark" to provide dark surface context to supporting components.

Custom button content#

Use customContent when the standard label and icon do not cover the content you need. You are responsible for aligning custom content.

Button with custom SVG#

A custom SVG can be part of the button's children. Give meaningful graphics an accessible name and hide decorative graphics from assistive technology. The button still needs a meaningful accessible name.