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.

Code Editor<Button
  text="Default button"
  on_click={() => {
    console.log('on_click')
  }}
/>
<Button
  text="Large button"
  on_click={() => {
    console.log('on_click')
  }}
  size="large"
  left
/>
<Button
  text="Default button icon"
  on_click={() => {
    console.log('on_click')
  }}
  icon="chevron_right"
  left
/>
<Button
  text="Large button icon"
  on_click={() => {
    console.log('on_click')
  }}
  size="large"
  icon="chevron_right"
  left
/>

For variant secondary, the recommended sizes are default and large.

Code Editor<Button
  text="Default button"
  on_click={() => {
    console.log('on_click')
  }}
  variant="secondary"
/>
<Button
  text="Large button"
  on_click={() => {
    console.log('on_click')
  }}
  size="large"
  variant="secondary"
  left
/>
<Button
  text="Default button icon"
  on_click={() => {
    console.log('on_click')
  }}
  icon="chevron_right"
  variant="secondary"
  left
/>
<Button
  text="Large button icon"
  on_click={() => {
    console.log('on_click')
  }}
  size="large"
  icon="chevron_right"
  variant="secondary"
  left
/>

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.

Code Editor<Button
  text="Default button"
  on_click={() => {
    console.log('on_click')
  }}
  icon="chevron_right"
  variant="tertiary"
/>
<Button
  text="Button large"
  on_click={() => {
    console.log('on_click')
  }}
  icon="chevron_right"
  variant="tertiary"
  size="large"
  left
/>
<Button
  text="Button text"
  on_click={() => {
    console.log('on_click')
  }}
  icon="bell"
  icon_position="top"
  variant="tertiary"
  left
/>

Icon buttons come in all sizes.

Code Editor<Button
  title="Small sized button with add icon"
  icon="add"
  size="small"
/>
<Button
  title="Medium sized button with add icon (default)"
  icon="add"
  size="medium"
  left
/>
<Button
  title="Default sized button with add icon (not default)"
  icon="add"
  size="default"
  left
/>
<Button
  title="Large sized button with add icon"
  icon="add"
  size="large"
  left
/>

Demos

Primary button

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

Secondary button

Code Editor<Button
  variant="secondary"
  onClick={() => {
    console.log('onClick')
  }}
  data-visual-test="button-secondary"
>
  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"
  data-visual-test="button-tertiary"
/>
<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 />

Error state

Buttons can have an error state

Code Editor<Button
  text="Primary button error"
  status="error"
  data-visual-test="button-error-primary"
/>
<Button
  text="Secondary button error"
  variant="secondary"
  status="error"
  left
  data-visual-test="button-error-secondary"
/>
<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
/>

Icon button

Code Editor<Button
  title="Disabled Icon only Button"
  icon="calendar"
  disabled
  right
/>
<Button
  title="Button with Icon only"
  icon="calendar"
  data-visual-test="button-icon"
/>
<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"
    data-visual-test="button-icon-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

#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

#Error state

#Icon button

#Custom button content