Tag & status tag

Aligned with J&J DS v1.2 (Figma 11856:31133). Tag for attribute / filter chips with optional dismissal; StatusTag for state pills (in progress, success, warning, error, not started); TagStack for grouping.

Tag variants

NeutralInfoSuccessWarningErrorBrandOutline

Show source

<Tag>Neutral</Tag>
<Tag variant="info">Info</Tag>
<Tag variant="success">Success</Tag>
<Tag variant="warning">Warning</Tag>
<Tag variant="error">Error</Tag>
<Tag variant="brand">Brand</Tag>
<Tag variant="outline">Outline</Tag>

Dismissible — filter chips

Pass `onDismiss` to render the X. Use these as removable filter chips.

OncologyPatient storiesInnovationResearch

Show source

<Tag variant="info" onDismiss={() => removeFilter("oncology")}>Oncology</Tag>

StatusTag — workflow states

ApprovedPending reviewFailedIn progressDraft

Show source

<StatusTag status="success">Approved</StatusTag>
<StatusTag status="warning">Pending review</StatusTag>
<StatusTag status="error">Failed</StatusTag>
<StatusTag status="info">In progress</StatusTag>
<StatusTag status="neutral">Draft</StatusTag>

TagStack — wrapping group

Wraps multiple tags with consistent gap. Use for filter rows, taxonomy lists, or attribute summaries.

CardioOncoImmunoNeuroSurgeryVisionOrthoPediatrics

Show source

<TagStack>
  <Tag>Cardio</Tag>
  <Tag>Onco</Tag>
  <Tag>Immuno</Tag>
  …
</TagStack>