Contained Icon
Renders an icon inside a styled container to highlight features, actions, or status indicators.
Preview
ContainedIcon Playground
Preview
Code
primary
secondary
neutral
success
error
warning
Controls
Style:
Simple
Expressive
Size:
S
M
L
XL
Corner Radius Type:
Default
Control
Full
Usage
import { ContainedIcon } from '@versaui/ui/assets/ContainedIcon';
import { Sparkle, CheckCircle, WarningOctagon } from '@phosphor-icons/react';
// Simple style (regular icon, solid background, zero shadow)
<ContainedIcon
style="simple"
role="primary"
icon={<Sparkle />}
/>
// Expressive style (duotone icon, gradient fill + outline, inset shadow)
<ContainedIcon
style="expressive"
role="success"
icon={<CheckCircle />}
/>
// Error warning with control corner radius
<ContainedIcon
style="expressive"
role="error"
cornerRadiusType="control"
size="large"
icon={<WarningOctagon />}
/>
// Fully-rounded contained icon (for StatusModal, badges, etc.)
<ContainedIcon
style="expressive"
role="warning"
cornerRadiusType="full"
size="large"
icon={<Warning />}
/>Visual Styles
Simple Style
The simple style follows the design system's clean, minimalist look. It renders a solid background fill with a matching outline and zero shadow/glow effects, automatically applying weight="regular" to the icon:
<ContainedIcon style="simple" role="primary" icon={<Sparkle />} />
<ContainedIcon style="simple" role="secondary" icon={<Heart />} />
<ContainedIcon style="simple" role="neutral" icon={<Gear />} />
<ContainedIcon style="simple" role="success" icon={<CheckCircle />} />
<ContainedIcon style="simple" role="error" icon={<WarningOctagon />} />
<ContainedIcon style="simple" role="warning" icon={<Warning />} />Expressive Style
The expressive style utilizes composite gradient fills, gradient outlines, and inner inset shadows (--inset-subtle-*), automatically applying weight="duotone" to the icon for richer depth and visual hierarchy:
<ContainedIcon style="expressive" role="primary" icon={<Sparkle />} />
<ContainedIcon style="expressive" role="secondary" icon={<Heart />} />
<ContainedIcon style="expressive" role="neutral" icon={<Gear />} />
<ContainedIcon style="expressive" role="success" icon={<CheckCircle />} />
<ContainedIcon style="expressive" role="error" icon={<WarningOctagon />} />
<ContainedIcon style="expressive" role="warning" icon={<Warning />} />Corner Radius & Sizes
Corner Radius Type
default(default): Uses default corner radius tokens (--corner-radius-default-*).control: Uses control corner radius tokens (--corner-radius-control-*).full: Uses fully rounded corner radius token (--corner-radius-default-fully-rounded).cornerRadius: Custom CSS value or design token string override.
<ContainedIcon cornerRadiusType="default" icon={<Sparkle />} />
<ContainedIcon cornerRadiusType="control" icon={<Sparkle />} />
<ContainedIcon cornerRadiusType="full" icon={<Sparkle />} />
<ContainedIcon cornerRadius="var(--corner-radius-default-fully-rounded)" icon={<Sparkle />} />Sizes
small: 32px container with 16px icon.medium(default): 40px container with 20px icon.large: 48px container with 24px icon.xlarge: 64px container with 32px icon.
<ContainedIcon size="small" icon={<Sparkle />} />
<ContainedIcon size="medium" icon={<Sparkle />} />
<ContainedIcon size="large" icon={<Sparkle />} />
<ContainedIcon size="xlarge" icon={<Sparkle />} />ContainedIcon Props
| Prop | Type | Default | Description |
|---|---|---|---|
style | 'simple' | 'expressive' | 'simple' | Visual style treatment. Simple has solid fill/outline with regular icon; Expressive has gradient fill/outline with duotone icon and inset shadow. |
role | 'primary' | 'secondary' | 'neutral' | 'success' | 'error' | 'warning' | 'primary' | Semantic role controlling colors and gradients. |
size | 'small' | 'medium' | 'large' | 'xlarge' | 'medium' | Container and icon size variant. |
cornerRadiusType | 'default' | 'control' | 'full' | 'default' | Corner radius token scale. 'default' uses default tokens; 'control' uses control tokens; 'full' uses fully-rounded token. |
cornerRadius | string | — | Explicit corner-radius override (e.g., token or px value). |
icon | React.ReactNode | React.ElementType | — | Icon element or component to render. |
color | string | — | Custom icon color override. Defaults to role's icon color token. |
iconSize | number | — | Custom icon size in pixels override. |
iconWeight | 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' | 'regular' | 'duotone' | Icon weight override. Automatically defaults based on style. |
children | React.ReactNode | — | Content rendered inside the container (can be used as alternative to icon prop). |
className | string | '' | Additional CSS classes. |