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

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.

Full width button
the width of a button can be changed using styled-system attributes.

Selected button
Use the active prop to render a button in its “selected” state.

Loader button
Example using the Loader component within a button.