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

NameTypeDefaultDescriptionRequired?
externalboolean
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"
activebooleanfalse
Set the button to display in its active state
disabledboolean
Disables user action and applies a disabled style on the button
childrenReact.Node
hrefstring
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
titlestring
qaObject{}
asany
ariaLabelstring
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} aria-hidden /> Visit Twitter
</Button>
</Box>

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">
Vist 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 .