Button

Components

Button

Button is used to trigger actions based on a user's interaction.

import { Button } from '@sproutsocial/racine'

<Box display='flex' flexWrap='wrap' justifyContent='space-around' alignItems='center' width='100%'>
  <Button>Default</Button>
  <Button appearance='primary'>Primary</Button>
  <Button appearance='secondary'>Secondary</Button>
  <Button appearance='destructive'>Destructive</Button>
  <Button appearance='placeholder'>Placeholder</Button>
  <Button appearance='pill'>Pill button</Button>
</Box>

<Box display='flex' flexWrap='wrap' justifyContent='space-around' alignItems='center' width='100%'>
  <Button>Default</Button>
  <Button appearance='primary'>Primary</Button>
  <Button appearance='secondary'>Secondary</Button>
  <Button appearance='destructive'>Destructive</Button>
  <Button appearance='placeholder'>Placeholder</Button>
  <Button appearance='pill'>Pill button</Button>
</Box>

Properties

Name	Type	Default	Description
`external`	`boolean`		If the button is being used as an anchor, this prop will cause the link to open in a new tab.
`size`	`"large"` `"default"`	`"default"`
`appearance`	`"primary"` `"secondary"` `"pill"` `"destructive"` `"default"` `"placeholder"`	`"default"`
`active`	`boolean`	`false`	Set the button to display in its active state
`disabled`	`boolean`		Disables user action and applies a disabled style on the button
`children`	`React.Node`
`href`	`string`		Setting this prop will cause the component to be rendered as an anchor element instead of a button element
`innerRef`	`"button"`		Used to get a reference to the underlying button
`onClick`	`(e: SyntheticEvent<HTMLButtonElement>) => any`		Action to perform when the button is clicked
`title`	`string`
`qa`	`Object`	`{}`
`as`	`any`
`ariaLabel`	`string`		Label used to describe the button if the button does not have text within it

Recipes

Large button

Used sparingly in forms with “large” .

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button 
    appearance='primary'
    size='large' 
  >
    Do the thing!
  </Button>
</Box>

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button 
    appearance='primary'
    size='large' 
  >
    Do the thing!
  </Button>
</Box>

Full width button

The width of a button can be changed using system props.

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button appearance='primary' width={1}>
    100% Width Button
  </Button>
</Box>

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button appearance='primary' width={1}>
    100% Width Button
  </Button>
</Box>

Button with an icon and text

When an icon and text are used in a button, a margin should be applied to the icon.

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button appearance='primary'>
    <Icon name="twitter" mr={200} /> Visit Twitter
  </Button>
</Box>

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button appearance='primary'>
    <Icon name="twitter" mr={200} /> Visit Twitter
  </Button>
</Box>

Button as a link

In some cases, you may want the styling of a button but the behavior of a link. Passing a value for the href prop will cause the button to render as an anchor element.

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button appearance='primary' href='https://sproutsocial.com' external>
    Vist the Help Center
  </Button>
</Box>

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button appearance='primary' href='https://sproutsocial.com' external>
    Vist the Help Center
  </Button>
</Box>

Disabled button

Used when the button can’t yet be acted upon.

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button
    disabled
    appearance='primary'
  >
    Disabled button
  </Button>
</Box>

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button
    disabled
    appearance='primary'
  >
    Disabled button
  </Button>
</Box>

Button with an icon

If a button does not include text, you should specify an aria-label attribute describing the button. Alternatively, you can use a text label within the button and hide it visually.

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button aria-label='Reply to this thread'>
    <Icon name="reply" />
  </Button>
</Box>

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button aria-label='Reply to this thread'>
    <Icon name="reply" />
  </Button>
</Box>

Selected button

Use the active prop to render a button in its “selected” state.

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button appearance='secondary' active>
    <Icon name="filter" mr={300} />
    Filter
  </Button>
</Box>

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button appearance='secondary' active>
    <Icon name="filter" mr={300} />
    Filter
  </Button>
</Box>

Placeholder button with an Icon

Pair the placeholder button with the circle+-filled icon to create a subtle action button.

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button appearance='placeholder'>
    <Icon name="circle+-filled" mr={200} /> Build Report
  </Button>
</Box>

<Box display='flex' flexWrap='wrap' justifyContent='space-around' width='100%'>
  <Button appearance='placeholder'>
    <Icon name="circle+-filled" mr={200} /> Build Report
  </Button>
</Box>

Loader button

Please use .