Skip to content

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

### Icon button

Signal button

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

Large Signal button

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

Button with Icon only