Skip to content

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

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