Components

Button

Button is used to trigger actions based on a user's interaction.

import { Button } from '@sproutsocial/racine'

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

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.

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 .