Button

Import

import { Button } from '@dnb/eufemia'

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

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 href‌Secondary 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" />}
/>

#Button

#Import

#Description

#Variants and sizes

#Demos

#Primary button

#Secondary button

#Primary button with icon

#Primary button with icon on left

#Tertiary button

#Anchor button

#Disabled buttons

#Signal button

#Large Signal button

#Icon button

#Custom button content