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>
	<Button appearance='ai-primary'>AI primary</Button>
	<Button appearance='ai-secondary'>AI secondary</Button>
	<Button appearance='ai-outline'>AI outline</Button>
</Box>

Properties

Name	Type	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"` `\| "small"` `\| "default"`
`appearance`	`\| "primary"` `\| "secondary"` `\| "pill"` `\| "destructive"` `\| "unstyled"` `\| "placeholder"` `\| "ai-primary"` `\| "ai-secondary"` `\| "ai-outline"`	What the button looks like.
`active`	`boolean`	Set the button to display in its active state
`disabled`	`boolean`	Disables user action and applies a disabled style on the button. Uses `aria-disabled="true"` instead of the HTML `disabled` attribute so the button remains keyboard-focusable and visible to screen readers.
`children`	`React.ReactNode`
`href`	`string`	Setting this prop will cause the component to be rendered as an anchor element instead of a button element
`download`	`string`	If the component is rendered as an anchor to a file, this prop sets the name of the file to be downloaded
`innerRef`	`React.Ref<HTMLButtonElement>`	Used to get a reference to the underlying button
`onClick`	`React.MouseEventHandler<HTMLButtonElement>`	Action to perform when the button is clicked
`title`	`string`
`qa`	`object`
`as`	`TypeStyledComponentsCommonProps["as"]`
`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' /> 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'
			/>
		</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" />
  </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} />
    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} /> Build Report
  </Button>
</Box>

Loader button

Please use .