Badge

mq-badge is the SDK's badge as a design-system primitive. It ships from @mediquo/ui as a custom element and as a React component.

Install

// Custom element — the import registers <mq-badge>
import "@mediquo/ui/components/badge";

// React
import { Badge } from "@mediquo/ui/react/badge";

Variants

variant is one of primary (the default), neutral, info, success, warning and outline. The text goes in the default slot and stays on one line: when it does not fit, it is cut with an ellipsis.

<Badge variant="success">Confirmada</Badge>

Accessibility

• A badge is text, not a control. It has no role and is not focusable. If you make it interactive, wrap it in a real button or link instead of adding a click handler to the badge.
• Colour is never the only signal. The variant changes the colour, so the text has to say the status on its own — "Cancelada", not just a red pill.
• Every variant's text holds 4.5:1 against its background in light and dark. warning uses the primary text colour because the warning text token falls under that on the warning background.
• Forced-colours mode draws a border so the pill's shape survives.

Styling

The component uses --mq-* tokens with literal fallbacks. --mq-badge-background, --mq-badge-color and --mq-badge-border-color override a variant's colours, and part="badge" reaches the pill.

info reads the blue primitives directly, because there is no semantic info token yet.