Skip to content
Home

Button

Info
Demos
Properties
Events

Description

The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism.

Variants and sizes

There should never be more than one primary button in a given context; secondary and tertiary button variants do not have this constraint. Generally speaking, a button should not be used when a link would suffice.

The Button component comes in different sizes.

For variant primary, the recommended sizes are default and large.

For variant secondary, the recommended sizes are default and large.

For variant tertiary, the recommended size is default. A variant with icon_position="top" is also available for use. It is not recommended to use the tertiary button without an icon. Looking for a similar variant without an icon? You might want to check out Anchor instead.

For variant signal, the recommended sizes are default and large.

Icon buttons come in all sizes.

Demos

Primary button

<Button

  text="Primary button with text only"

  on_click={() => {

    console.log('on_click')

  }}

/>

Secondary button

<Button

  variant="secondary"

  onClick={() => {

    console.log('onClick')

  }}

>

  Secondary button with text only

</Button>

Primary button with icon

<Button text="Primary button with icon" icon="chevron_right" />

Primary button with icon on left

<Button icon_position="left" icon="chevron_left">

  Primary button with icon on left

</Button>

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.

<Button

  variant="tertiary"

  text="Tertiary button with icon on left"

  icon_position="left"

  icon="chevron_left"

/>

<Button

  variant="tertiary"

  text={<span>Text inside additional span</span>}

  icon_position="left"

  icon="chevron_left"

  right="1rem"

/>

Tertiary button with top placed icon.

<Button

  variant="tertiary"

  icon_position="top"

  icon="close"

  text="Button text"

/>

<Button

  variant="tertiary"

  icon_position="top"

  icon="close"

  text="Large button"

  size="large"

/>

Tertiary button with long text and text wrap enabled.

<Button

  wrap

  variant="tertiary"

  text="A long text where wrap is enabled magnis rutrum netus neque ridiculus euismod sit dictum laoreet libero"

  icon="chevron_left"

  icon_position="left"

/>

Anchor button

Primary with hrefSecondary with href
<Button

  text="Primary with href"

  href="/uilib/components/button/demos"

  icon_position="right"

  icon="chevron_right"

  on_click={({ event }) => {

    event.preventDefault()

  }}

  right

/>

<Button

  variant="secondary"

  text="Secondary with href"

  href="/uilib/components/button/demos"

  target="_blank"

  right

/>

<Button

  href="/uilib/components/button/demos"

  title="This is a link"

  icon="chevron_right"

  size="default"

  right

/>

Disabled buttons

<Button text="Disabled primary button" disabled right />

<Button

  text="Disabled secondary button"

  variant="secondary"

  disabled

  right

/>

<Button

  text="Disabled tertiary button"

  variant="tertiary"

  disabled

  right

/>

<Button title="Disabled Icon Button" icon="calendar" disabled right />

Error state

Buttons can have an error state

<Button text="Primary button error" status="error" />

<Button

  text="Secondary button error"

  variant="secondary"

  status="error"

  left

/>

<Button

  title="Primary icon button error"

  variant="primary"

  icon={question}

  size="default"

  status="error"

  left

/>

<Button

  title="Secondary icon button error"

  icon={question}

  size="default"

  status="error"

  left

/>

Signal button

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

<Button

  variant="signal"

  text="Signal Button"

  icon={Bell}

/>

Large Signal button

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

<Button

  variant="signal"

  text="Large Signal Button"

  icon={<Bell />}

  size="large"

  icon_size="medium"

/>

Icon button

<Button

  title="Disabled Icon only Button"

  icon="calendar"

  disabled

  right

/>

<Button

  title="Button with Icon only"

  icon="calendar"

/>

<Button title="Small sized icon button" icon="add" size="small" left />

<Button

  title="Large sized icon button"

  icon={question}

  size="large"

  left

/>

<Button

  title="Icon button with status"

  icon={question}

  status="error"

  left

/>

Custom button content

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

<Button

  icon="close"

  icon_position="right"

  text="Button with custom content"

  custom_content={<IconPrimary icon="check" right="small" />}

/>