Components Data display

Tag

A short status or category label on a soft tint of its tone.

import { Tag } from '@kition/tessera-ui'

Playground

Published

Props

tone

children

What is shown

import { Tag } from '@kition/tessera-ui'

<Tag tone="success">Published</Tag>

When to use

A record’s status in a table or header.

When not to

A count beside a label: use Badge.

Examples

Tones

DraftProcessingPaidPendingFailed

tag.tsx

import { Tag } from '@kition/tessera-ui'

export default function Demo() {
  return (
    <div className="demo-row">
      <Tag>Draft</Tag>
      <Tag tone="info">Processing</Tag>
      <Tag tone="success">Paid</Tag>
      <Tag tone="warning">Pending</Tag>
      <Tag tone="danger">Failed</Tag>
    </div>
  )
}

Props

Tag

A short status or category label on a soft tint of its tone.

Prop	Type	Default	Description
`tone`	`Tone`	`'neutral'`

Also takes the attributes of its HTML element (`className`, `aria-*`, events…).