Badge
Usage
Badges are small labels used to display status, tags, or counts. They come in multiple variants (solid, soft, outline) and shapes (pill, rounded, square).
YAML Export
1. Copy the YAML from the component view.
2. Paste it into your Canvas app.
3. Bind the Text property to display dynamic content (e.g., Text: CountRows(MyCollection) & "").
Use Cases
- Status labels: Show current status (Active, Inactive, Pending)
- Tags: Categorize items (New, Featured, Sale)
- Counts: Display numbers (5, 12, 99+)
Variants
- Solid: Filled background with contrasting text
- Soft: Light background tint with colored text
- Outline: Transparent background with colored border
Presets
Quick color presets:
- Default: Blue (BrandPrimary)
- Success: Green
- Warning: Yellow/Orange
- Error: Red
- Info: Light Blue
- Neutral: Gray
Quick Colors
Click any quick color swatch in the preview to instantly apply that color to the badge.
Export Modes
- Safe: Text + preset variant.
- Advanced: Full padding, shape, icon, outline settings (Pro feature).
Best Practices
- Keep text to 1-2 words maximum.
- Use soft variant for subtle emphasis.
- Use outline variant when you need less visual weight.
- Pill shape works best for short text.
- Square shape for icons or single characters.