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

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.