Usage

Token is an interactive chip. It can be removed, clicked, or used as a link, for a selected value or a filter. Badge is a static status or count marker.

Typeahead, Multi Selector, and Tokenizer use Token internally, and a chat composer can use it for an attachment or a mention.

removable shows a focusable remove button. Click, Backspace, and Delete all emit remove. disabled ignores that action. #icon sits before the text and is the place for a type icon.

href renders a link. When a remove button is also present, the link and the button are siblings, so the button is not nested inside the link.

<script setup lang="ts">
import { Token } from '@astryx-vue/core/Token'
</script>

<template>
  <Token label="Design review" color="blue" removable>
    <template #icon>
      <span aria-hidden="true">#</span>
    </template>
  </Token>
</template>

The remove button’s accessible name defaults to Remove Design review. provideAstryxLocale('zh-CN') switches it to Chinese.

Best Practices

Guideline	Practice
Do	Turn on removable when the person can dismiss the chip, and update your list in remove.
Do	Use #icon for the type. Keep the icon out of label.
Don't	Use Token for success or warning status. Use Badge for that.

Anatomy

Element	Description
Icon	A leading icon that identifies the token type, like a user avatar or category symbol.
Label	The visible text. Also used as the accessible name when labelHidden is true.
End content	Trailing content after the label, like a count badge or status dot.
Remove button	An X button that appears when removable is set. Activating it emits remove.

Examples

Clickable

Interactive tokens that respond to clicks. Use for toggleable filters or tokens that open a detail view.

Colors

Default

DefaultRedOrangeYellowGreenTealCyanBluePurplePinkGray

Disabled

DefaultRedOrangeYellowGreenTealCyanBluePurplePinkGray

All 11 color variants in default and disabled states.

End Content

Inbox 12 Reviews 3 ResolvedDone

Tokens with trailing content like a count badge or status indicator.

Icon

Icons identify the token category

Sarah ChenFeaturedDesignVerified

Tokens with a leading icon that identifies the entity type.

Removable

Active filters

Status: OpenPriority: HighTeam: Design

Selected recipients

Sarah ChenAlex RiveraJordan Lee

Tokens with a dismiss button for selections the user can undo.