Legend Indicator Properties
Simple circular indicators for data visualization legends, status indicators, and category markers. Available in various colors and sizes to represent different states or data series.
Component Setup
Create or update your LegendIndicator component
Copy this code to create your LegendIndicator component
/components/ui/LegendIndicator.tsx
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Style Colors
All colors work in both light and dark modes.
Legens
Legens
Legens
Legens
Legens
Legens
Legens
Legens
Legens
Legens
Sizes
Each size maintains consistent visibility across different screen sizes.
large
medium
small
Custom size
Add custom sizes by using Tailwind utility classes.
API Reference
The LegendIndicator component provides a simple way to create colored circular indicators for various use cases.
LegendIndicator
Circular indicator component with customizable size and color options.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "small""medium""large" | "medium" | Size of the indicator |
color | "neutral""gray""blue""orange""red""green""yellow""purple""pink""teal" | "blue" | Color theme of the indicator |
className | "string" | "undefined" | Additional CSS classes for custom styling |