Badge

v1.0.0

Compact status label for success, warning, muted, and other semantic states.

Import

import { Badge } from '@meteorack/sdk-react';

How To Use It

Use it for short, scannable states such as active, inactive, trial, or expired.
Keep badge content compact and move longer explanations into supporting text or notices.

Works Well With

Card Table PageHeader

Props

variant?: 'default' | 'success' | 'warning' | 'danger' | 'muted'

Chooses the semantic badge palette.

children: ReactNode

Label content rendered inside the badge.

className?: string

Optional class name for the badge element.

style?: React.CSSProperties

Optional inline style overrides applied on top of the base badge styles.

Example

Badge.tsx

import { Badge } from '@meteorack/sdk-react';

export function LicenseStates() {
  return (
    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
      <Badge variant="success">Active</Badge>
      <Badge variant="warning">Trial</Badge>
      <Badge variant="danger">Expired</Badge>
      <Badge variant="muted">Draft</Badge>
    </div>
  );
}

PreviousCard NextInput