Heimerle + Meule Logo
Heimerle + Meule

Badge

Badges communicate status, categorisation, metadata, and other compact pieces of information. They are designed to be lightweight visual indicators that can be displayed alongside content, within tables, cards, and forms.

Quick Start

Import the Badge component and choose a colour and variant combination.

Badge
1import { Badge } from "@ecos/ui";
2
3<Badge>Badge</Badge>

Variants

Badges support default, label, outline, and dot variants.

Default

Label

Outline

Dot

Badge
Badge
Badge
1<Badge variant="default">Badge</Badge>
2
3<Badge variant="label">Badge</Badge>
4
5<Badge variant="outline">Badge</Badge>
6
7<Badge variant="dot" />

Colours

Colours indicate meaning and should remain consistent throughout the application.

Primary

Secondary

Error

Primary
Secondary
Error
1<Badge color="primary">Primary</Badge>
2
3<Badge color="secondary">Secondary</Badge>
4
5<Badge color="error">Error</Badge>

Dot Badge

Dot badges provide a minimal visual status indicator when a text label is not required.

1<Badge color="primary" variant="dot" />
2
3<Badge color="secondary" variant="dot" />
4
5<Badge color="error" variant="dot" />

Usage Examples

Badges are commonly used to display statuses, categories, and metadata.

New
Draft
Failed
1<Badge color="primary" variant="default">New</Badge>
2
3<Badge color="secondary" variant="outline">Draft</Badge>
4
5<Badge color="error" variant="default">Failed</Badge>

API Reference

Property

Type

Default

Description

color"primary" | "secondary" | "error""primary"Determines the badge colour and semantic meaning.
variant"default" | "label" | "outline" | "dot""default"Controls the visual presentation of the badge.
childrenReactNode-Content displayed within the badge.
classNamestring-Additional CSS classes applied to the badge.

Visual Reference

Visual reference covering all supported badge variants and colours.

Variant

Primary

Secondary

Error

Default
Badge
Badge
Badge
Label
Badge
Badge
Badge
Outline
Badge
Badge
Badge
Dot