Badge

Tones

neutral (default), primary, success, error, warning, info. Each maps to the matching semantic color tokens, with an outline variant.

import { Badge } from '@cajon-ui/react';

<Badge>Draft</Badge>
<Badge tone="success">Active</Badge>
<Badge tone="error" outline>Failed</Badge>

Prop	Type	Default	Notes
`tone`	`neutral \| primary \| success \| error \| warning \| info`	`neutral`	Color tone
`outline`	`boolean`	`false`	Transparent background, colored border

All other native <span> attributes pass through; the component forwards its ref.

Ownership and delegated management are facts, not a new component. Compose ordinary badges using these rules:

Always pair Owned by [customer] with Managed by [agency]; either one alone can read as ownership.
Owner is neutral; delegated manager is primary.
Access state stays separate: success for active, warning for pending, and error for suspended or revoked.
Name the organization. Do not use vague labels such as “external” or “partner”.
Put narrower grant scope in copy, not a badge.
Records owned by the current organization carry no ownership badge, keeping delegated records visually exceptional.