Skip to content
Home

Button

Info
Demos
Properties
Events

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"

  left

/>

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

/>

<VisibilityByTheme visible="sbanken">

  <Button

    title="Tertiary icon button"

    size="large"

    icon={question}

    variant="tertiary"

  />

</VisibilityByTheme>

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" />}

/>