Components
Button
Button is used to trigger actions based on a user's interaction.
import { Button } from '@sproutsocial/racine'Properties
| 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""destructive""default""unstyled""placeholder" | "unstyled" | What the button looks like. "default" is deprecated in favor of "unstyled" | |
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 | |||
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” .
Full width button
The width of a button can be changed using system props.
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.
Disabled button
Used when the button can’t yet be acted upon.
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.
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 .