Token

Components

Token

Code

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

Name	Type	Default	Description
`onClick`	`React.EventHandler<React.SyntheticEvent>`
`children`	`React.ReactNode`
`qa`	`object`
`closeable`	`boolean`	`true`	Show the close icon in the token. Can be used with or without icon prop
`valid`	`boolean`	`true`	Indicates whether the token value is valid or not
`hasWarning`	`boolean`	`false`	Indicates whether the token has a related warning
`disabled`	`boolean`	`false`	Indicates whether the token is disabled
`palette`	`\| "neutral"` `\| "blue"`	`"neutral"`
`as`	`TypeStyledComponentsCommonProps["as"]`
`innerRef`	`React.Ref<HTMLElement>`	`null`	Used to get a reference to the underlying element

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='X' name="twitter" size="mini" mr={300} />
  East Germany
</Token>

Token with warning

<Token hasWarning={true}>This is a bad idea</Token>