Button

Buttons allow users to take actions with a click or tap. They can return either a button element with an onClick event or an anchor element with an href.

import {
  Button,
  ButtonGroup,
} from '@ef-global/backpack/Button'

Variants

Three core variants of buttons are available: Primary, Secondary, and Link. All of them accept various modifiers as documented below. In the examples below we are wrapping the buttons in a <ButtonGroup> to ensure the correct layout.

Primary

The primary button denotes the main action available to the user in any view. It can be set using the variant prop, but is also the default if nothing is passed.

<ButtonGroup>
  <Button as={'button'} variant="primary">Primary</Button>
  <Button as={'button'} variant="primary" disabled>Disabled</Button>
</ButtonGroup>

Secondary

The secondary button can be used alongside the primary for less important actions.

<ButtonGroup>
  <Button as={'button'} variant="secondary">Primary</Button>
  <Button as={'button'} variant="secondary" disabled>Disabled</Button>
</ButtonGroup>

Link

Finally, the link style button can be used for even less important actions or more minimal UIs.

<ButtonGroup>
  <Button as={'button'} variant="link">Primary</Button>
  <Button as={'button'} variant="link" disabled>Disabled</Button>
</ButtonGroup>

Mono buttons

If your UI clashes with the Primary button color, you can also set its mono prop to 'light' or 'dark' depending on the background. This works for all button variants.

Mono light

<ButtonGroup>
  <Button as={'button'} variant="primary" mono="light">Primary</Button>
  <Button as={'button'} variant="secondary" mono="light">Secondary</Button>
  <Button as={'button'} variant="link" mono="light">Link</Button>
</ButtonGroup>

Mono dark

<ButtonGroup>
  <Button as={'button'} variant="primary" mono="dark">Primary</Button>
  <Button as={'button'} variant="secondary" mono="dark">Secondary</Button>
  <Button as={'button'} variant="link" mono="dark">Link</Button>
</ButtonGroup>

Shape

The buttons' shape prop allows you to set the correct shape.

Round

The 'round' modifier ensures that single-icon buttons appear as circles.

<ButtonGroup>
  <Button as={'button'} variant="primary" shape="round"><IconArrowDown /></Button>
  <Button as={'button'} variant="secondary" shape="round"><IconArrowDown /></Button>
  <Button as={'button'} variant="link" shape="round"><IconArrowDown /></Button>
</ButtonGroup>

Square

The 'square' modifier makes buttons more rectangular. It's useful for product UIs or when you need to pack more buttons in a row.

<ButtonGroup>
  <Button as={'button'} variant="primary" shape="square">Square <IconArrowDown /></Button>
  <Button as={'button'} variant="secondary" shape="square">Square <IconArrowDown /></Button>
  <Button as={'button'} variant="link" shape="square">Square <IconArrowDown /></Button>
</ButtonGroup>

Sizes

Buttons are currently available in two sizes: regular or small. The size can be set with the size prop.

Regular (default)

<ButtonGroup>
  <Button as={'button'} variant="primary" size="regular">Primary <IconArrowDown /></Button>
  <Button as={'button'} variant="secondary" size="regular">Secondary <IconArrowDown /></Button>
  <Button as={'button'} variant="link" size="regular">Link <IconArrowDown /></Button>
</ButtonGroup>

Small

<ButtonGroup>
  <Button as={'button'} variant="primary" size="small">Primary <IconArrowDown /></Button>
  <Button as={'button'} variant="secondary" size="small">Secondary <IconArrowDown /></Button>
  <Button as={'button'} variant="link" size="small">Link <IconArrowDown /></Button>
</ButtonGroup>

As

By default the Button will return an html button element which you can add an onClick event to.

Button (default)

<ButtonGroup>
  <Button as="button" variant="primary" onClick={action}>Primary</Button>
  <Button as="button" variant="secondary" onClick={action}>Secondary</Button>
  <Button as="button" variant="link" onClick={action}>Link</Button>
</ButtonGroup>

Anchor

If you want to use the button to link to another page, set as to 'a' and pass in an href.

Primary Secondary Link

<ButtonGroup>
  <Button as="a" variant="primary" href="https://google.com">Primary <IconExternalLink /></Button>
  <Button as="a" variant="secondary" href="https://google.com">Secondary <IconExternalLink /></Button>
  <Button as="a" variant="link" href="https://google.com">Link <IconExternalLink /></Button>
</ButtonGroup>

Theming

By default the buttons inherit your theme's --color-system-primary-accessible variable. Just setting this one variable handles the colouring of all buttons. Buttons are also themeable using specific button color component variables:

Variables

Name	Description	Default
--color-system-primary-accessible	All buttons color theme	hsl(209, 100%, 44%)
--color-component-button-primary-bg	Primary button background	--color-system-primary-accessible
--color-component-button-primary-text	Primary button content	--color-system-primary-accessible
--color-component-button-secondary-bg	Secondary button background	--color-system-primary-accessible
--color-component-button-secondary-text	Secondary button content	--color-system-primary-accessible
--color-component-button-link-bg	Link button background	--color-system-primary-accessible
--color-component-button-link-text	Link button content	--color-system-primary-accessible

Inline styles

By overriding the --color-system-primary-accessible variable you can theme all buttons at once.

<ButtonGroup style={{'--color-system-primary-accessible': 'hsl(272 50.0% 45.8%)'}}>
  <Button as={'button'} variant="primary">Primary <IconExternalLink /></Button>
  <Button as={'button'} variant="secondary">Secondary <IconExternalLink /></Button>
  <Button as={'button'} variant="link">Link <IconExternalLink /></Button>
</ButtonGroup>

Or you can modify instances separately as shown below. If using a gradient also set the --color-system-primary-accessible variable to one of the gradient stop colors so the secondary and link buttons fit the theme.

<ButtonGroup>
  <Button as={'button'} variant="primary" style={{'--color-component-button-primary-bg': 'hsl(322 75.0% 46.0%)'}}>Primary <IconExternalLink /></Button>
  <Button as={'button'} variant="secondary" style={{'--color-component-button-secondary-text': 'hsl(272 50.0% 45.8%)'}}>Secondary <IconExternalLink /></Button>
  <Button as={'button'} variant="link" style={{'--color-component-button-link-bg': 'hsl(192 85.0% 31.0%)', '--color-component-button-link-text': 'hsl(192 85.0% 31.0%)'}}>Link <IconExternalLink /></Button>
</ButtonGroup>

Breadcrumb Carousel