Menu
Tag and Pill components for labels, badges, and status indicators. Use for categories, status labels, or inline metadata.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
Accordion component with collapsible sections. Use for FAQs, nested content, or expandable details sections.
Button component with variants, sizes, loading states, and icon support. Use when creating clickable actions, forms, or navigation buttons.
Calendar component for date and month selection. Use when building date pickers, scheduling interfaces, or date range selectors.
Carousel component for image/content sliders with navigation controls. Use for image galleries, hero sections, or content that scrolls horizontally.
Checkbox component for boolean or multi-select inputs. Use when building forms with boolean toggles or multiple selection lists.
Dropdown menu component with trigger and content pattern. Use when building selectable menus, action menus, or nested navigation.
| name | groww-tag-pill |
| description | Tag and Pill components for labels, badges, and status indicators. Use for categories, status labels, or inline metadata. |
import Tag from '@groww-tech/ui-toolkit/dist/esm/components/atoms/Tag';
import Pill from '@groww-tech/ui-toolkit/dist/esm/components/atoms/Pill';
// or
import { Tag, Pill } from '@groww-tech/ui-toolkit';
interface TagProps {
children: React.ReactNode; // Tag content
isWarning?: boolean; // Warning variant (yellow/orange)
isError?: boolean; // Error variant (red)
isInfo?: boolean; // Info variant (blue)
tagClass?: string; // Custom class
className?: string;
}
interface PillProps {
children: React.ReactNode;
type?: 'default' | 'success' | 'warning' | 'error' | 'info';
onRemove?: () => void; // Remove button callback
size?: 'small' | 'medium';
className?: string;
}
// Default
<Tag>New</Tag>
// Warning
<Tag isWarning>Pending</Tag>
// Error
<Tag isError>Failed</Tag>
// Info
<Tag isInfo>In Progress</Tag>
// Basic pill
<Pill>Active</Pill>
// With type
<Pill type="success">Verified</Pill>
// Removable pill
<Pill onRemove={() => handleRemove(tagId)}>
Removable
</Pill>