Button

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

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

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