Button

A clickable element that navigates to another page or triggers an action within the current page.

_bookshop_name: primitives/button
variant: primary
size: md
label: Try it now!

Properties

label string

The text that goes inside the button.

link string

The URL that the button should link to.

iconName enum

The name of the icon to display.

iconPosition enum | default: before

The position of the icon relative to the label.

Accepted values:
  • before
  • after

hideText boolean | default: false

Whether to hide the button text and show only the icon.

variant enum | default: ghost

The presentation of button.

Accepted values:
  • primary
  • secondary
  • tertiary
  • ghost
  • text

size enum | default: md

The size of the button.

Accepted values:
  • sm
  • md
  • lg

Examples

Sizes

- _bookshop_name: primitives/button
  variant: primary
  size: sm
  label: Small
  style: 'margin-inline-end: var(--spacing-sm);'
- _bookshop_name: primitives/button
  variant: primary
  size: md
  label: Medium
  style: 'margin-inline-end: var(--spacing-sm);'
- _bookshop_name: primitives/button
  variant: primary
  size: lg
  label: Large
  style: 'margin-inline-end: var(--spacing-sm);'

Variants

- _bookshop_name: primitives/button
  variant: primary
  label: Primary
  style: 'margin-inline-end: var(--spacing-sm);'
- _bookshop_name: primitives/button
  variant: secondary
  label: Secondary
  style: 'margin-inline-end: var(--spacing-sm);'
- _bookshop_name: primitives/button
  variant: tertiary
  label: Tertiary
  style: 'margin-inline-end: var(--spacing-sm);'
- _bookshop_name: primitives/button
  variant: ghost
  label: Ghost
  style: 'margin-inline-end: var(--spacing-sm);'

Icons

- _bookshop_name: primitives/button
  iconName: cake
  label: Cake
  hideText: true
  variant: tertiary
  style: 'margin-inline-end: var(--spacing-sm);'
- _bookshop_name: primitives/button
  iconName: check
  label: Find out more
  variant: tertiary
  style: 'margin-inline-end: var(--spacing-sm);'
- _bookshop_name: primitives/button
  iconName: arrow-down-right
  iconPosition: after
  label: Everything you need
  variant: tertiary
  style: 'margin-inline-end: var(--spacing-sm);'