TkxBadge

import { TkxBadge } from 'tekivex-ui';

<TkxBadge variant="success">active</TkxBadge>

Variants

Variants

primarysecondarysuccesswarningdangerinfo

<TkxBadge variant="primary">primary</TkxBadge>
<TkxBadge variant="secondary">secondary</TkxBadge>
<TkxBadge variant="success">success</TkxBadge>
<TkxBadge variant="warning">warning</TkxBadge>
<TkxBadge variant="danger">danger</TkxBadge>
<TkxBadge variant="info">info</TkxBadge>

Sizes

Sizes

smmdlg

<TkxBadge size="sm">small</TkxBadge>
<TkxBadge size="md">medium</TkxBadge>
<TkxBadge size="lg">large</TkxBadge>

Outlined

Outlined

v2.7open sourcepreview

<TkxBadge variant="primary" outlined>v2.7</TkxBadge>
<TkxBadge variant="success" outlined>open source</TkxBadge>

Outlined badges have a transparent fill — useful when stacked over coloured backgrounds where a solid pill would be too loud.

With dot

<TkxBadge variant="success" dot>online</TkxBadge>
<TkxBadge variant="danger" dot>error</TkxBadge>

The dot is decorative; screen readers announce only the text.

RSC compatible

TkxBadge uses no hooks or browser APIs. It renders in Next.js Server Components without 'use client'.

Props

Prop	Type	Required	Description
variant	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'		Defaults to primary.
size	'sm' | 'md' | 'lg'		Defaults to md.
outlined	boolean		Transparent fill, coloured border.
dot	boolean		Renders a leading status dot.
children	ReactNode	yes	Badge label. Sanitised before render.

Source

src/components/TkxBadge.tsx