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"

  right="1rem"

/>

Tertiary button with top placed icon.

<Button

  variant="tertiary"

  icon_position="top"

  icon="close"

  text="Button text"

/>

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

/>

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

/>

<Button title="Button with Icon only" icon="calendar" />

<Button

  title="Small sized button with default Icon"

  icon="add"

  icon_size="default"

  size="small"

/>

<Button

  title="Default sized Button with medium Icon"

  icon="calendar"

  size="default"

/>

<Button

  title="Button with custom, Secondary Icon only"

  icon={question}

/>

<Button

  title="Button with status"

  icon={question}

  status="error"

/>

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

/>