General Components
Buttons, badges, avatars, icons, tooltips, dropdowns, and tags — the foundational building blocks of every interface.
Badges
Status indicators, labels, and categorization tokens available in multiple colors, sizes, and styles.
Colors
GrayBrandErrorWarningSuccessGray BlueBlue LightBlueIndigoPurplePinkOrange
Sizes
SmallMediumLarge
Types
Pill ColorColorModern
Variants
ActiveFeaturedRemovable
Badge Group
New featureCheck out our latest update
| Prop | Type | Default | Description |
|---|---|---|---|
type | "pill-color" | "color" | "modern" | "pill-color" | Badge visual style |
size | "sm" | "md" | "lg" | "md" | Badge size |
color | BadgeColors | "gray" | Badge color — 12 options: gray, brand, error, warning, success, gray-blue, blue-light, blue, indigo, purple, pink, orange |
Avatars
User and entity representations with images, initials, status indicators, and verification badges.
Sizes
Initials
JD
AB
CD
Status
Verified
Placeholder
Avatar Label Group
John Doe
john@example.com
Jane Smith
Product Designer
Profile Photo
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Avatar size |
src | string | null | - | Image source URL |
alt | string | - | Image alt text |
status | "online" | "offline" | - | Online status indicator |
verified | boolean | false | Show verified badge |
initials | string | - | Fallback initials when no image |
placeholderIcon | FC | - | Custom placeholder icon component |
contrastBorder | boolean | false | Show a contrast border around the avatar |
focusable | boolean | false | Show focus ring when parent group is focused |
Featured Icons
Decorative icon containers in six visual themes: light, gradient, dark, modern, modern-neue, and outline.
Light Theme
Light Colors
Dark Theme
Gradient Theme
Modern Theme
Outline Theme
| Prop | Type | Default | Description |
|---|---|---|---|
icon* | FC | ReactNode | - | The icon to render inside the container |
color* | "brand" | "gray" | "success" | "warning" | "error" | - | Color scheme of the featured icon |
theme | "light" | "gradient" | "dark" | "outline" | "modern" | "modern-neue" | "light" | Visual theme variant |
size | "sm" | "md" | "lg" | "xl" | "sm" | Icon container size |
Tooltips
Contextual information overlays triggered on hover or focus, with configurable placement and optional descriptions.
Basic
Placements
With Arrow
| Prop | Type | Default | Description |
|---|---|---|---|
title* | ReactNode | - | Primary tooltip text |
description | ReactNode | - | Secondary descriptive text |
placement | "top" | "bottom" | "left" | "right" | ... | "top" | Tooltip position relative to trigger |
arrow | boolean | false | Show directional arrow on tooltip |
delay | number | 300 | Delay in ms before showing |
closeDelay | number | 0 | Delay in ms before hiding |
offset | number | 6 | Distance from trigger in px |
isDisabled | boolean | false | Prevent tooltip from appearing |
Dropdown
Action menus and contextual options triggered by a button, built on React Aria MenuTrigger.
Dots Button Trigger
Button Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Display text for the menu item |
icon | FC | - | Leading icon component |
addon | string | - | Right-aligned addon text (e.g. keyboard shortcut) |
unstyled | boolean | false | Render without default item styles |