Indicators
Caption Flag
A caption flag component
Overview
The Caption Flag component displays a small promotional or status label above or beside content, such as “New” or “Sale,” to draw attention without dominating the layout.
Key Business & UX Benefits
- Highlights promotions or status in a compact, recognizable way.
- Keeps layout clean with a small, themed badge.
- Fits captions, cards, and product tiles.
- Theme-aligned styling for light and dark modes.
Pro-Tip from Larry: Use Caption Flag for “New” or “Sale” so promotions are visible without clutter.
Usage
CaptionFlag
Feature List
- Promotional or status label for captions and cards
- Theme-aligned variants and sizing
- Compact display for product tiles and content
- Configurable content via slot or prop
API Reference
| Prop | Default | Type |
|---|---|---|
text | string | |
variant | primary | "error" | "primary" | "accent" | "grey" | "neutral" | "success" | "warning" |