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>Unstyled</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'` `'unstyled'` `'placeholder'`	`'unstyled'`	What the button looks like. "default" is deprecated in favor of "unstyled"
`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>

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>

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} backgroundType='dark' aria-hidden /> Visit X
  </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>
		<Box display="flex" alignItems="center">
    	Visit the Help Center
			<Icon
				ml={200}
				name='arrow-right-up-solid'
				size='mini'
				role={undefined}
        svgProps={{
					role: 'img',
					'aria-label': 'opens in a new tab'
				}}
			/>
		</Box>
  </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>

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-outline" aria-hidden />
  </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-outline" mr={300} aria-hidden />
    Filter
  </Button>
</Box>

Placeholder button with an Icon

Pair the placeholder button with the plus-outline icon to create a subtle action button.

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

Loader button

Please use .