Skip to content
Home

Button

Info
Demos
Properties
Events

Demos

Primary button

Code Editor
<Button
  text="Primary button with text only"
  on_click={() => {
    console.log('on_click')
  }}
/>

Secondary button

Code Editor
<Button
  variant="secondary"
  onClick={() => {
    console.log('onClick')
  }}
>
  Secondary button with text only
</Button>

Primary button with icon

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

Primary button with icon on left

Code Editor
<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.

Code Editor
<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.

Code Editor
<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.

Code Editor
<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
Code Editor
<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

Code Editor
<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'

Code Editor
<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'

Code Editor
<Button
  variant="signal"
  text="Large Signal Button"
  icon={<Bell />}
  size="large"
  icon_size="medium"
/>

Icon button

When the button has no text an aria-label attribute is required for accessibility. And a title attribute is recommended for mouse hover.

We automatically add an aria-label with the same value as title if text and children properties are undefined. So in most cases you only have to set the title property.

Code Editor
<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.

Code Editor
<Button
  icon="close"
  icon_position="right"
  text="Button with custom content"
  custom_content={<IconPrimary icon="check" right="small" />}
/>