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?
onClick(event: SyntheticEvent<HTMLButtonElement>) => void
childrenReact.Node
qaObject
closeablebooleantrue
Show the close icon in the token. Can be used with or without icon prop
validbooleantrue
Indicates whether the token value is valid or not
disabledbooleanfalse
Indicates whether the token is disabled

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.