LegendIndicator

A simple component to display a colored dot with a label, commonly used in chart legends, dashboards, status indicators, and category tags. Supports custom colors, sizes, shapes, and label content.

---

Import

import { LegendIndicator } from '@odyssee/components';

---

Examples

Basic Usage

Code Éditable

Résultat

---

With Custom Colors

Code Éditable

Résultat

---

Sizes

Code Éditable

Résultat

---

Shapes

Code Éditable

Résultat

---

Custom Classes

Code Éditable

Résultat

---

JSX Label

Code Éditable

Résultat

---

Chart Legend Example

Code Éditable

Résultat

---

Status Indicators Example

Code Éditable

Résultat

---

Table des props

Prop	Type	Default	Description
label	string | JSX.Element	— (req.)	The label to display next to the dot.
color	string	"gray-500"	Tailwind color class (e.g. "blue-600", "red-500").
size	"xs" | "sm" | "md" | "lg"	"sm"	Size of the dot.
shape	"circle" | "square"	"circle"	Shape of the dot.
dotClassName	string	—	Additional CSS classes for the dot.
labelClassName	string	—	Additional CSS classes for the label.
className	string	—	Additional CSS classes for the wrapper.
id	string	auto-gen	HTML id attribute.
style	string	—	Inline styles.

---

Implementation Notes

• Color:
  The color prop should be a valid Tailwind color class suffix (e.g. "blue-600"). The component will apply bg-{color} to the dot.
• Size:
  • xs: very small dot
  • sm: small (default)
  • md: medium
  • lg: large
• Shape:
  • circle (default): fully rounded dot
  • square: slightly rounded square
• Custom Classes:
  Use dotClassName and labelClassName to further style the dot or label (e.g. add rings, bold, etc.).
• Label:
  Accepts both string and JSX for rich formatting.
• Composition:
  The component is a simple flex row: a colored dot followed by the label.

---

Accessibilité

• The dot is a decorative <span>; the label is readable text.
• The wrapper uses inline-flex for alignment.
• For accessibility, ensure the label is descriptive and not just color-based.
• If used as a status indicator, consider adding aria-label or additional context for screen readers.

---

Best Practices

• Use for chart legends, status indicators, tags, or any context where a color+label pair is needed.
• Prefer semantic labels over color-only indicators for accessibility.
• Use consistent color naming across your app for clarity.
• For dashboards, combine with other components (e.g. lists, cards) for richer UIs.
• Use size and shape to match the visual density of your UI.

---

Related

• Tailwind CSS Colors
• Pulse Framework
• ARIA: Using color

---