Buttonchild
Use inside icon-only buttons with VisuallyHidden labelIcon
Wrapper for icon components with consistent sizing and semantic colors. Provides standardized icon rendering across the design system.
Setup
import { Icon } from '@fragments-sdk/ui';Examples
Default
Basic icon with default styling
Loading preview...
Sizes
Available size options
Loading preview...
Semantic Colors
Status and semantic color variants
Loading preview...
Weights
Icon weight/style options
Loading preview...
Advanced Icon Props
Forward extra icon-package-specific props through iconProps
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
style | object | Not set | — |
iconRequired | union | Not set | Icon component to render |
size | enumxssmmdlgxl | md | Icon size |
weight | stringthinlightregularboldfillduotone | regular | Optional icon style/weight hint (forwarded when supported by the icon component) |
variant | enumdefaultprimarysecondarytertiaryaccentsuccesswarningerror | default | Semantic color variant |
color | enumprimarysecondarytertiaryaccentsuccesswarningerror | Not set | Deprecated alias for variant |
iconProps | object | Not set | Additional props forwarded to the underlying icon component (typed from the icon prop in TypeScript) |
Usage Guidelines
When to use
- Displaying UI icons alongside text or in buttons
- Indicating status or state visually
- Adding visual hierarchy to feature lists
- Decorating cards or stats with relevant symbols
When not to use
- Large decorative illustrations (use Image or custom SVG)
- Logo display (use dedicated Logo component)
- Complex graphics with multiple colors
- Animated icons (use custom implementation)
Best practices
- Use semantic color variants (success, error, warning) for status indication
- Pair icons with text labels for accessibility
- Match icon weight/style to surrounding text weight for visual consistency when supported by the icon package
- Use consistent sizes within the same context
- Use iconProps for package-specific icon options not exposed directly on the wrapper
Accessibility
- Icons are decorative by default (aria-hidden)
- Always pair with visible or visually-hidden text for meaning
- Do not rely on color alone to convey information
- Consider using VisuallyHidden for icon-only buttons