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'
<Token onClick={() => alert('You removed this token')}>
United Kingdom
</Token>

Properties

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
palette
'neutral'
'blue'
'neutral'

Recipes

Static token
<Token closeable={false}>Mexico</Token>
Invalid token
<Token closeable={true} valid={false}>Argentina</Token>

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

<Token>
<Icon aria-label='Twitter' name="twitter" size="mini" mr={300} />
East Germany
</Token>