Button - React

View on Figma View on GitHub

import { Button } from '@sky-uk/ui-core';

<Button onClick={() => {}}>Button</Button>

Props

$appearance

default
light

$variant

primary (default)
secondary
tertiary

<Flex $gap={4}>
  <Button>Button</Button>
  <Button $variant="secondary">Button</Button>
  <Button $variant="tertiary">Button</Button>
  <Button disabled>Button</Button>
</Flex>

<Flex $gap={4}>
  <Button $appearance="light" $variant="secondary">Button</Button>
  <Button $appearance="light" $variant="tertiary">Button</Button>
</Flex>

States

The hover and focus state can be set via $hover and $focused respectively to override default behaviour.

<Flex $alignItems="center" $gap={4}>
    <Button $hover>Button</Button>
    <Button $focused>Button</Button>
</Flex>

Groups

Adjacent Button components can be spaced using the Flex component.

<Flex $gap={4}>
  <Button $flex={1}>Button</Button>
  <Button $variant="secondary" $flex={1}>Button</Button>
</Flex>

Accessibility

Button with href

The Button is a styled HTML button element and should be used with onClick. When using the Button component with an href, please make sure to use as="a" to ensure the correct semantic element is used.

<Button as="a" href="http://www.sky.com" target="_blank">Visit Sky</Button>

System Modifiers

The Button component also supports the props applied using the following system modifiers: