Feedback

Badge

Short status and category labels.

import { Badge } from '@jsonresume/ui'Source(opens in a new tab)

Playground

Change the props and copy the result.

Official

tone

children

jsx

<Badge tone="brand">Official</Badge>

Examples

Tones

NeutralOfficialCommunityBetaValidDeprecatedInvalid

badge/tones.tsx

import { Badge } from '@jsonresume/ui';

export default function BadgeTones() {
  return (
    <>
      <Badge>Neutral</Badge>
      <Badge tone="brand">Official</Badge>
      <Badge tone="outline">Community</Badge>
      <Badge tone="info">Beta</Badge>
      <Badge tone="success">Valid</Badge>
      <Badge tone="warning">Deprecated</Badge>
      <Badge tone="danger">Invalid</Badge>
    </>
  );
}

In context

@jsonresume/schema

1.7.0

Deprecated projects[].description still validates; use summary.

badge/in-context.tsx

import { Badge, Heading, Stack, Text } from '@jsonresume/ui';

export default function BadgeInContext() {
  return (
    <Stack gap={3}>
      <Stack direction="row" gap={2} align="center">
        <Heading level={3} size="group">
          @jsonresume/schema
        </Heading>
        <Badge tone="brand">1.7.0</Badge>
      </Stack>
      <Text tone="muted">
        <Badge tone="warning">Deprecated</Badge> projects[].description still
        validates; use summary.
      </Text>
    </Stack>
  );
}

Accessibility

Every tone meets 4.5:1 text contrast.

Props

<Badge>

Also accepts the attributes of the element Badge renders.
Prop	Type	Default	Description
tone	brandinfowarningneutraloutlinesuccessdanger	neutral	Style variant.