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

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON

LAYOUT

Learn more

Name	Type	Default	Description
`external`	`boolean`		Optional prop to make a button rendered as an anchor open in a new tab
`size`	`"large""default"`	`"default"`	Button size
`appearance`	`"primary""secondary""pill""outline""destructive""default""placeholder"`	`"default"`	Type of Button
`active`	`boolean`	`false`	Display Button in active state
`disabled`	`boolean`		Disables user action and applies disabled style on the Button
`children`	`ReactNode`		Button content (accepted via string or components / DOM nodes)
`href`	`string`		Optional URL (will cause the component to be rendered as an anchor instead of a button)
`innerRef`	`"button"`		Pass React.createRef() to get a reference to the underlying button
`onClick`	`signature`		Action to perform when clicked
`title`	`string`		Sets the title attribute and is used for QA attributes
`qa`	`Object`	`{}`	Customizable QA Object - for backwards compatibility
`as`	`any`

Recipes

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.

<Button aria-label='Reply to this thread'>
  <Icon name="reply" />
</Button>

<Button aria-label='Reply to this thread'>
  <Icon name="reply" />
</Button>

Button with an icon and text

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

<Button appearance='secondary'>
  <Icon name="twitter" mr={200} /> Visit Twitter
</Button>

<Button appearance='secondary'>
  <Icon name="twitter" mr={200} /> Visit Twitter
</Button>

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.

Vist the Help Center

<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>

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>

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.

<Button appearance='placeholder'>
  <Icon name="circle+-filled" mr={200} /> Build Report
</Button>

<Button appearance='placeholder'>
  <Icon name="circle+-filled" mr={200} /> Build Report
</Button>

Loader button

Please use the LoaderButton component.