Buttons and ButtonGroup

Button is used for actions, like in forms, while Link is used for destinations, or moving from one page to another. The Button component comes in various flavors.

Default examples

<Button>Default Button</Button>
<Button variant='danger'>Button Danger</Button>
<Button variant='outline'>Button Outline</Button>
<Button variant='primary'>Button Primary</Button>
<Button variant='purple'>Button Purple</Button>
<Button disabled>Disabled Button</Button>
<Button variant='plain'>Plain Button</Button>

Link examples

In special cases where you'd like to use a <a> styled like a Button, use <Button is='a'> and provide an href.

<Button is='a' href='https://bristlecone.style'>Button as an `a` element (link)</Button>
<Button is='a' href='https://bristlecone.style' underline>Button as an `a` element with underline</Button>
<Button is='a' href='https://bristlecone.style' size='large'>Large Button as an `a` element</Button>
<Button is='a' href='https://bristlecone.style' size='large' variant='primary'>Large `a` element as Primary variant</Button>
<Button is='a' href='https://bristlecone.style' size='large' variant='danger'>Large `a` element as Danger variant</Button>
<Button is='a' href='https://bristlecone.style' size='medium' disabled>Medium `a` element as Disabled variant</Button>
<Button link href='https://bristlecone.style'>Button that only looks like a link</Button>

With an icon

Buttons can have an icon (Octicon), either stand-alone or with corresponding text in conjunction with the usual Button props, as demonstrated in the OcticonButton wrapper component.

Flat examples

<Button flat>Default Button w/no gradient (flat)</Button>
<Button variant='danger' flat>Flat Button Danger</Button>
<Button variant='primary' flat>Flat Button Primary</Button>
<Button variant='purple' flat>Flat Button Purple</Button>
<Button variant='outline' flat>Flat Button Outline (blue)</Button>
<Button disabled flat>Flat Button Disabled</Button>

Size and variant examples

<Button size='small'>Small Button</Button>
<Button size='large' variant='purple'>Large Purple Button</Button>
<Button size='xlarge'>X-Large Button</Button>
<Button size='xlarge' variant='danger'>X-Large Danger Button</Button>
<Button size='large' variant='primary'>Large Primary Button</Button>
<Button size='small' variant='outline'>Small Outline Button</Button>
<Button size='small' disabled>Small Disabled Button</Button>

Block (full-width) examples

<Button block>Default Button</Button>
<Button variant='danger' block>Button Danger</Button>
<Button variant='outline' block>Button Outline</Button>
<Button variant='primary' block>Button Primary</Button>
<Button variant='purple' block>Button Purple</Button>
<Button disabled block>Disabled Button</Button>

Different border radius examples

<Button radius='small' variant='danger'>Button No Radius Danger</Button>
<Button radius='large'>Button Large Radius</Button>
<Button radius='0' variant='outline'>Button No Radius Outline</Button>
<Button radius='large' variant='purple'>Button Large Radius Purple</Button>
<Button radius='large' variant='primary'>Button Large Radius Primary</Button>
<Button radius='large' disabled>Button Large Radius Disabled</Button>
<Button radius='xlarge' disabled>Button X-Large Radius Disabled</Button>
<Button radius='0' disabled>Button No Radius Disabled</Button>

Outline flavors

In addition to the blue-specific button outline (above Default examples), there is a set of outline flavors used by this component and several others, e.g. Label, that you can use. They are as follows:

<Button outline='black'>Default button with black outline</Button>
<Button outline='gray'>Default button with gray outline</Button>
<Button outline='green'>Default button with gray outline</Button>
<Button outline='purple'>Default button with gray outline</Button>
<Button outline='red'>Default button with gray outline</Button>

Outlines with various radii and sizes

you can change the look-n-feel of outline-flavored buttons via the same props as the common button examples demonstrated above, e.g.

<Flex
    my='3'
    flexWrap='wrap'
    overflowX='scroll'
    justifyContent='space-evenly'
    alignItems='center'
>
    <Button outline='black' radius='3'>Black outline button with large radius</Button>
    <Button outline='gray' radius='3'>Gray outline button with medium radius</Button>
    <Button outline='green' radius='3'>Green outline button with medium radius</Button>
    <Button outline='purple' radius='3'>Purple outline button with medium radius</Button>
    <Button outline='red' radius='3'>Red outline button with medium radius</Button>
</Flex>
<Flex
    my='3'
    flexWrap='wrap'
    overflowX='scroll'
    justifyContent='space-evenly'
    alignItems='center'
>
    <Button outline='black' size='large' radius='6'>Black outline button with large radius</Button>
    <Button outline='gray' size='large' radius='6'>Gray outline button with medium radius</Button>
    <Button outline='green' size='large' radius='6'>Green outline button with medium radius</Button>
    <Button outline='purple' size='large' radius='6'>Purple outline button with medium radius</Button>
    <Button outline='red' size='large' radius='6'>Red outline button with medium radius</Button>
</Flex>
<Flex
    my='3'
    flexWrap='wrap'
    overflowX='scroll'
    justifyContent='space-evenly'
    alignItems='center'
>
    <Button outline='black' size='xlarge' radius='9'>Black outline button with large radius</Button>
    <Button outline='gray' size='xlarge' radius='9'>Gray outline button with medium radius</Button>
    <Button outline='green' size='xlarge' radius='9'>Green outline button with medium radius</Button>
    <Button outline='purple' size='xlarge' radius='9'>Purple outline button with medium radius</Button>
    <Button outline='red' size='xlarge' radius='9'>Red outline button with medium radius</Button>
</Flex>

Grouped Buttons

<ButtonGroup
    my={2}
>
    <Button>Button One</Button>
    <Button>Button Two</Button>
    <Button>Button Three</Button>
    <Button>Button Four</Button>
    <Button>Button Five</Button>
</ButtonGroup>
<ButtonGroup
    my={2}
>
    <Button variant='primary'>Button Primary</Button>
    <Button variant='danger'>Button Danger</Button>
    <Button variant='outline'>Button Outline</Button>
    <Button variant='purple'>Button Purple</Button>
    <Button disabled>Button Disabled</Button>
</ButtonGroup>
<ButtonGroup
    my={2}
>
    <Button variant='primary' flat>Button Primary - Flat</Button>
    <Button variant='danger' flat>Button Danger - Flat</Button>
    <Button variant='outline' flat>Button Outline - Flat</Button>
    <Button variant='purple' flat>Button Purple - Flat</Button>
    <Button disabled flat>Button Disabled - Flat</Button>
</ButtonGroup>
<ButtonGroup
    my={2}
>
    <Button size='large' variant='primary'>Button Primary</Button>
    <Button size='large' variant='danger'>Button Danger</Button>
    <Button size='large' variant='outline'>Button Outline</Button>
    <Button size='large' variant='purple'>Button Purple</Button>
    <Button size='large' disabled>Button Disabled</Button>
</ButtonGroup>
<ButtonGroup
    my={2}
>
    <Button size='xlarge' variant='primary'>Button Primary</Button>
    <Button size='xlarge' variant='danger'>Button Danger</Button>
    <Button size='xlarge' variant='outline'>Button Outline</Button>
    <Button size='xlarge' variant='purple'>Button Purple</Button>
    <Button size='xlarge' disabled>Button Disabled</Button>
</ButtonGroup>

System props

Button components get BACKGROUND, BORDER, COMMON, TYPOGRAPHY and VARIANT related system props. Read the System Props doc page for a full list of available props.

Component props

Prop nameTypeDefaultDescription
isStringbuttonsets the HTML tag for the component
disabledBooleansets the disabled attribute on the Button
onClickFunctionfunction to be called when Button is clicked
sizeStringuse small for a small Button, or large for a large Button. pr xlarge for an even larger button
radiusString3pxuse large for larger border radius, 0 for a block/square button, and small, medium and xlarge for other variants. String pixel value, e.g. 20px is also valid.
variantStringuse black, charcoal, danger, default, gray, green, link, outline, plain, primary, purple, red for different button variants. Additional, valid options are defined in the theme's buttons dictionary
hrefStringuse href if you define the is prop as a hyperlink element (a tag)
blockBooleanmakes the Button full-width relative to the button's container element
flatBooleanfalseuse to remove the background-gradient from a button variant (scheme)
outlineStringuse to create an outlined-styled button. Can be used in combination with the variant prop. Valid options are defined in the theme's outlineStyles dictionary.
iconString / Nodeuse to define and render an icon (Octicon)
iconSizeNumber16use to adjust the size of the icon
iconPlacementStringleftuse to change the left-right placement of the icon. Options are left and right
linkBooleanfalseset to make a button element look like a styled-link while remaining an actual button element
underlineBooleanfalseset to make a link have an underline by default