Button

Description

The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism. There should never be more than one primary button in a given context (e.g. a action-nav); secondary and tertiary button variants does not have this constraint. Generally speaking, a button should not be used when a link would suffice.

Demos

Primary button

Secondary button

Disabled primary button

Disabled secondary button

Primary button with icon

Primary button with icon on left

Tertiary button

The tertiary button variant does support newlines while the icon is placed top aligned. You can enable multiline support with the wrap property.

Tertiary button with top placed icon.

Tertiary button with long text and text wrap enabled.

Anchor button

Signal button

Medium is equivalent to 24, but responsive. To import custom icons, use: import { bell_medium as Bell } from '@dnb/eufemia/icons'

Large Signal button

Large Signal button with medium sized icon. To import custom icons, use: import { bell_medium as Bell } from '@dnb/eufemia/icons'

Icon button

Custom button content

This is, as all of the demos, only an example how to achieve various needs, and not that you should do it.