Go to Content
Design System
Playroom Storybook
#ClimateEmergency

Button

Open in Storybook Open in Figma

Buttons are used for interactive elements. You can find real-world examples in the Button examples.

For backwards compatibility, the old Button docs still exist. DEPRECATED

Rules For Copywriters
  • You find guides for wording of Buttons in the section UI text.

Label

Loading demo…
Rules For Developers
  • The children are the label. They are mandatory, even when only the icon is displayed.
  • Consider making the accessible label (aria-label) available for Copywriters, see Rules for Accessibility under UI text.
  • There is no accessible text for the icon itself, so the text provided via children or aria-label must convey the meaning.
  • A button can take a pill, which will be added after the label, but pill usage is currently restricted to buttons in PrimaryNavigation.

Variants

Loading demo…

Inverted variants

Button variants invert to white when placed on coloured backgrounds:

Loading demo…
Rules For Developers
  • The variant automatically inverts when being placed in a .g-inverted container

Sizes

Loading demo…
Rules For Designers
  • Global styles
    • Buttons only support a single line of text – it is ellipsed when too long
    • Buttons are as wide as their content on tier SM and up and are 100% on XS
  • Small size styles
    • 24px height (including border)
    • 14/16px font size
    • 8px horizontal padding (including border)
  • Regular size styles
    • 40px height (including border)
    • 16/24px font size
    • 24px horizontal padding (including border)
Rules For Developers
  • Add fullWidth prop to control whether the Button turns full-width below certain tiers

Disabled

Loading demo…
Rules For Developers
  • Every Button can be disabled by adding a disabled attribute

Icon

Loading demo…
Rules For Developers
  • The children are the label, and they are mandatory, independent of the Button’s visual appearance
  • Set the hiddenLabel prop to control whether the label is shown

Using a link

Loading demo…
Rules For Developers
  • If it goes somewhere, use a link. If it does something, use a Button. In other words, links need a meaningful URL to go to, which may be a remote destination, but also somewhere else on the same page (i.e. an anchor). Make sure to get it right, as the two have their distinct behaviour – Buttons are triggered by pressing Space while anchor links by pressing Enter.

ButtonGroup

Use ButtonGroup to lay out a group of Buttons.

HINT Resize your browser to see what happens.

Loading demo…
Rules For Designers
  • Horizontal space between regular sized Buttons is 20px. Small Buttons have a 50% reduced horizontal spacing (10px).
  • Vertical space between Buttons is 10px, but 20px to other elements (e.g. paragraphs and headlines).
Rules For Developers
  • Always put Buttons in .g-group.g-group-button containers
  • Make sure there is no whitespace between closing and opening braces of two Buttons
  • If you need alignment, use Bootstrap’s .text-left/.text-center/.text-right on the container
  • Don’t put other HTML elements in a .g-group-button container - they are designed to work with Buttons only.
  • For details on .g-group see Typography.

ClearableButton BETA

ClearableButton is used in the George searchbar and it includes another button to clear itself.

Loading demo…