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 | 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""outline""destructive""default""placeholder" | "default" | ||
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 |
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.