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
Optional prop to make a button rendered as an anchor open in a new tab
size"large""default""default"
Button size
appearance"primary""secondary""pill""outline""destructive""default""placeholder""default"
Type of Button
activebooleanfalse
Display Button in active state
disabledboolean
Disables user action and applies disabled style on the Button
childrenReactNode
Button content (accepted via string or components / DOM nodes)
hrefstring
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
onClicksignature
Action to perform when clicked
titlestring
Sets the title attribute and is used for QA attributes
qaObject{}
Customizable QA Object - for backwards compatibility

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.