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""outline""destructive""default" | "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 |
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 styled-system attributes.
Selected button
Use the active prop to render a button in its “selected” state.
Loader button
Example using the Loader component within a button.