Components
Button
Button is used to trigger actions based on a user's interaction.
import { Button } from '@sproutsocial/racine'
Properties
System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.
Name | Type | Default | Description | Required? |
---|---|---|---|---|
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 |
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 with an icon and text
When an icon and text are used in a button, a margin should be applied to the icon.
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.
Full width button
The width of a button can be changed using system props.
Selected button
Use the active
prop to render a button in its “selected” state.
Placeholder button with an Icon
Pair the placeholder
button with the circle+-filled
icon to create a subtle action button.
Loader button
Please use the LoaderButton component.