---
title: "Button — React"
canonical: https://sky-ui.cf.sky.com/components/button/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Button — React

Buttons (also called CTAs – Call To Action) help users initiate actions.

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

---

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

---

## Props

### $appearance

- `default`
- `light`

### $variant

- `primary (default)`
- `secondary`
- `tertiary`

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

```tsx
<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.

```tsx
<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.

```tsx
<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.

```tsx
  <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:

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [margin](/core/system/margin/)
- [width](/core/system/width/)