import {Button} from '@primer/react-brand'
This is the default variant for the Button component. It corresponds to the secondary
variant appearance.
<Button>Default</Button>
The primary
variant of Button indicates that the action is of high priority, and should be used sparingly.
<Button variant="primary">Primary</Button>
The subtle
variant of Button indicates that the action is a low priority one.
<Button variant="subtle">Primary</Button>
<Stack direction="vertical" alignItems="flex-start"><Button size="medium">Register now</Button><Button size="large">Register now</Button></Stack>
The animated arrow indicator can be removed using the hasArrow
prop.
<Button hasArrow={false}>No arrow</Button>
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>
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>
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 | 'medium' 'large' | 'medium' | The size variations available in Button |
hasArrow | boolean | true | A flag to show/hide the arrow icon |