Tag

Variants

Choose the variant that best communicates the semantic intent of the label.

Neutral

Archived

import { Tag } from '@eekodigital/raster';

<Tag>Archived</Tag>

Success

Published

<Tag variant="success">Published</Tag>

Danger

Overdue

<Tag variant="danger">Overdue</Tag>

Warning

Pending review

<Tag variant="warning">Pending review</Tag>

Info

In progress

<Tag variant="info">In progress</Tag>

All variants

Archived

Published

Overdue

Pending review

In progress

<Tag>Archived</Tag>
<Tag variant="success">Published</Tag>
<Tag variant="danger">Overdue</Tag>
<Tag variant="warning">Pending review</Tag>
<Tag variant="info">In progress</Tag>

Props

Prop	Type	Default	Description
variant	’neutral’ | ‘success’ | ‘danger’ | ‘warning’ | ‘info'	'neutral’	Controls the colour scheme of the tag.
children	ReactNode	—	The label text or content inside the tag.
className	string	—	Additional CSS class names.