Badge

A small count or status beside a label.

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

Playground

New

Props

children

What is shown

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

<Badge>New</Badge>

When to use

The number of records in a view.
A Beta or New mark.

When not to

An action: use a Button.

Examples

Count and status

Grid view 128AI fields Beta

badge.tsx

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

export default function Demo() {
  return (
    <div className="demo-row">
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14 }}>
        Grid view <Badge>128</Badge>
      </span>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14 }}>
        AI fields <Badge>Beta</Badge>
      </span>
    </div>
  )
}

Props

Badge

A small count or status beside a label (records in a view, a beta mark).

No props.

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

Used in

1 of Kition's 16 kits use this component.

Table