Components

Token

Token is used to denote selected options in a workflow. Tokens are typically picked using select menus and advanced input fields and can be dismissible or static.

Tokens can be actionable or static. Behind the scenes, the HTML element rendered is determined by the use case (either a button or div).

import { Token } 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.

NameTypeDefaultDescriptionRequired?
onClicksignature
Optional custom event for the token *
childrenReactNode
Text or content to pass into the token
qaObject
Customizable QA Object
closeablebooleantrue
Show Close icon in Token. Can be used with or without icon prop
validbooleantrue
Indicates whether the token value is acceptable

Recipes

Static token
Mexico
Invalid token

Token with icon
Icons should always be placed on the left side of the token to avoid collision with the close icon.