Badge
Data DisplayStable
Small status indicators and labels for UI elements. Supports 7 semantic variants including success, caution, and info.
Quick Import
import { Badge } from "@cohere-ai/waypoint-ui/badge";Live Preview
Loading Badge...
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'success' | 'caution' | 'secondary' | 'destructive' | 'outline' | 'info' | 'default' | Visual style |
asChild | boolean | false | Render as child element (useful for links) |
Examples
All Badge Variants
All 7 semantic badge variants
1 import { Badge } from '@cohere-ai/waypoint-ui/badge'; 2 3 <Badge variant="default">Default</Badge> 4 <Badge variant="secondary">Secondary</Badge> 5 <Badge variant="outline">Outline</Badge> 6 <Badge variant="success">Success</Badge> 7 <Badge variant="caution">Caution</Badge> 8 <Badge variant="destructive">Destructive</Badge> 9 <Badge variant="info">Info</Badge>
Badge as Link
Using asChild to render a badge as an anchor
1 import { Badge } from '@cohere-ai/waypoint-ui/badge'; 2 3 <Badge asChild variant="info"> 4 <a href="/docs">Documentation</a> 5 </Badge>
Additional Resources
Design Guidelines
Do
Use success/caution/destructive for status indicators.
Keep badge text brief (1–3 words).
Don't
Use badges for primary actions — use Button instead.
Found an Issue?
If you've encountered a bug or have feedback about the Badge component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.