Button

Button is used to initiate actions on a page or form.

Import

import {Button} from '@primer/react'

Name	Default	Description
childrenRequired		`React.ReactNode` The content of the button.
countRequired		`number \| string` For counter buttons, the number to display.
variant	`'default'`	`'default' \| 'primary' \| 'danger' \| 'invisible'` Change the visual style of the button.
size	`'medium'`	`'small' \| 'medium' \| 'large'`
leadingIconDeprecated		`React.ComponentType<OcticonProps>` An icon to display before the button text.
leadingVisual		`React.ElementType` A visual to display before the button text.
trailingIconDeprecated		`React.ComponentType<OcticonProps>` An icon to display after the button text.
trailingVisual		`React.ElementType` A visual to display after the button text.
inactive		`boolean` Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button. This is intended to be used when a system error such as an outage prevents the button from performing its usual action. Inactive styles are slightly different from disabled styles because inactive buttons need to have an accessible color contrast ratio. This is because inactive buttons can have tooltips or perform an action such as opening a dialog explaining why it's inactive. If both `disabled` and `inactive` are true, `disabled` takes precedence.
as	`'button'`	`React.ElementType`
sx		`SystemStyleObject`
ref		`React.RefObject<HTMLButtonElement>`