Standalone component page

An example of a component page, featuring descriptions, prop tables and editable code snippets.

Ready to useReviewed for accessibility


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

Examples

Default

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

<Button>Default</Button>

Primary

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

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

Subtle

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

<Button variant="subtle">Primary</Button>

Sizes

<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

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

Removing the arrow

The animated arrow indicator can be removed using the hasArrow prop.

<Button hasArrow={false}>No arrow</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 here.

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

Animation

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 here.

<AnimationProvider>
  <Animate animate="fade-in">
    <Button leadingVisual={<SearchIcon />}>Search</Button>
    <Button trailingVisual={<ChevronDownIcon />}>Select</Button>
    <Button leadingVisual={<FilterIcon />} trailingVisual={<ChevronDownIcon />}>
      Filter
    </Button>
  </Animate>
</AnimationProvider>

Polymorphism

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

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

Inline

const Counter = props => {
  const [count, setCount] = React.useState(0)
  return (
    <Stack direction="vertical" alignItems="center">
      <Text as="p">
        {props.label}: {count}
      </Text>
      <Button hasArrow={false} onClick={() => setCount(c => c + 1)}>
        Increment
      </Button>
    </Stack>
  )
}
render(<Counter label="Counter" />)

Component props

Label

Name	Type	Default	Description
`propOne`	`ReactElement`	`undefined`	Description of my prop
`propTwo`	`'single'`, `2`	`undefined`	Description of my prop