Indicators
Category Node Flag
Promotional badge component for category navigation with themed variants.
Overview
The CategoryNodeFlag component enables store owners to draw attention to featured or time-sensitive categories with visual badges. It supports four semantic variants (promo, sale, new, icon) with theming controls for size, corner radius, padding, and colors. Implemented as a separate molecule, it can be reused across all category node variants (Basic, Compact, Big). The flexible content slot accepts localized text or emoji icons for international storefronts.
Key Business & UX Benefits
- Surfaces promo, sale, or new on category tiles without custom markup.
- Four variants and theming keep badges consistent and on-brand.
- Content slot supports text or emoji for localization.
- Reusable across Basic, Compact, and Big category nodes.
Pro-Tip from Larry: Use CategoryNodeFlag on category tiles so promotions are visible in navigation.
Usage
CategoryNodeFlag
Feature List
- Multiple themed variants: promo, sale, new, and icon
- Configurable corner radius and size options
- Brand-consistent colors from theme palette
- Flexible content slot for custom text or icons
API Reference
| Prop | Default | Type |
|---|---|---|
variant | promo | "icon" | "promo" | "sale" | "new" |
radius | equal | "equal" | "unequal" |
size | default | "default" | "small" |
iconName | string | |
text | string |