Components

Button

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

import { Button } from '@sproutsocial/racine'

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON
LAYOUT
Learn more
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

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.

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.