import {Button} from '@primer/react'
This is the default variant for the Button component.
<Button>Default</Button>
The danger variant of Button is used to warn users about potentially destructive actions
<Button variant="danger">Danger</Button>
The outline variant of Button is typically used as a secondary button
<Button variant="outline">Outline</Button>
The invisible variant of Button indicates that the action is a low priority one.
<Button variant="invisible">Invisible</Button>
Button component supports three different sizes. small, medium, large.
<><Button size="small">Search</Button><Button sx={{mt: 2}}>Search</Button><Button sx={{mt: 2}} size="large">Search</Button></>
We 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.
<><Button leadingIcon={SearchIcon}>Search</Button><Button trailingIcon={SearchIcon} sx={{mt: 2}}>Search</Button><Button leadingIcon={SearchIcon} trailingIcon={CheckIcon} sx={{mt: 2}}>Search</Button></>
A separate component called IconButton is used if the action shows only an icon with no text. This button will remain square in shape.
<IconButton aria-label="Search" icon={SearchIcon} />
IconButton also supports the three different sizes. small, medium, large.
<><IconButton aria-label="Search" size="small" icon={SearchIcon} /><IconButton aria-label="Search" icon={SearchIcon} sx={{ml: 2}} /><IconButton aria-label="Search" size="large" icon={SearchIcon} sx={{ml: 2}} /></>
A common use case for primer is a button with a counter component which shows the child count value.
We provide Button.Counter as a composite component which requires you to provide a number as child.
The counter will match the variant styles of the parent button.
<Button>Watch<Button.Counter>1</Button.Counter></Button>
A button can be styled in an appropriate manner using the sx prop. This may be to change width, or to add margins etc.
Here's an example of a block button which takes 100% of available width. Checkout styled-system to see what you can send in an sx prop.
<Button sx={{width: '100%'}}>Block</Button>
Native <button> HTML attributes are forwarded to the underlying React button component and are not listed below.
| Name | Type | Default | Description |
|---|---|---|---|
| children Required | React.ReactNode | Button description along with other components like Counter could be used here. | |
| variant | 'default' | 'primary' | 'danger' | 'outline' | 'invisible' | Changes the look and feel of the button which is different for each variant | |
| size | 'small' | 'medium' | 'large' | Changes the size of the button component | |
| leadingIcon | Component | provide an octicon. It will be placed before the button text | |
| trailingIcon | Component | provide an octicon. It will be placed after the button text | |
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. |
| Name | Type | Default | Description |
|---|---|---|---|
| children Required | number | The counter value as a number | |
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. |