@primer/react-brand/docs/components/Button/react.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
title: Button
description: Use the button component for the main actions on a page or form.
keywords: ['action', 'cta', 'control', 'interactive', 'click']
ready: true
a11yReviewed: true
figma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=2931%3A30104'
source: https://github.com/primer/brand/blob/main/packages/react/src/Button/Button.tsx
storybook: '/brand/storybook/?path=/story/components-button--playground'
---

```js
import {Button} from '@primer/react-brand'
```

## Examples

### Default

This is the default variant for the Button component. It corresponds to the `secondary` variant appearance.

```jsx
<Button>Default</Button>
```

### Primary

The `primary` variant of `Button` indicates that the action is of high priority, and should be used sparingly.

```jsx
<Button variant="primary">Primary</Button>
```

### Subtle

The `subtle` variant of Button indicates that the action is a low priority one.

```jsx
<Button variant="subtle">Subtle</Button>
```

### Sizes

```jsx
<Stack direction="vertical" alignItems="flex-start">
  <Button size="small">Register now</Button>
  <Button size="medium">Register now</Button>
  <Button size="large">Register now</Button>
</Stack>
```

### Block

```jsx
<Button block>Full-width button</Button>
```

### Using an icon

You can place an icon inside the `Button` in either the leading or the trailing position to enhance the visual context. It is recommended to use an [Octicon](https://primer.style/octicons) here.

```jsx
<Stack direction="vertical" alignItems="flex-start">
  <Button leadingVisual={<SearchIcon />}>Search</Button>
  <Button trailingVisual={<ChevronDownIcon />}>Select</Button>
  <Button leadingVisual={<FilterIcon />} trailingVisual={<ChevronDownIcon />}>
    Filter
  </Button>
</Stack>
```

### Polymorphism

The `Button` component can render as a `button` or `a` HTML element. By default, it will render as a `button`.

```jsx
<Button as="a" href="https://github.com">
  Register now
</Button>
```

## Component props

### Button

| Name             | Type                                   |    Default    | Description                                                                                             |
| :--------------- | :------------------------------------- | :-----------: | :------------------------------------------------------------------------------------------------------ |
| `leadingVisual`  | `ReactElement`                         |  `undefined`  | The leading visual appears before the button content                                                    |
| `trailingVisual` | `ReactElement`                         |  `undefined`  | The trailing visual appears after the button content                                                    |
| `variants`       | `'primary' \| 'secondary' \| 'subtle'` | `'secondary'` | The styling variations available in Button                                                              |
| `size`           | `'small' \| 'medium' \| 'large'`       |   `'medium'`  | The size variations available in Button                                                                 |
| `block`          | `boolean`                              |    `false`    | The full-width option available in Button                                                               |
| `hasArrow`       | `boolean`                              |    `false`    | Deprecated. The `hasArrow` prop will be removed in a future release.                                    |
| `disabled`       | `boolean`                              |    `false`    | Disables the rendered element using `disabled` or `aria-disabled` attributes based on the element type. |