Icon
React componentUse a consistent stroke-based visual language for actions.
Try it out
Use the live controls or open the Code tab to view and copy the example.
API reference
Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.
| Prop | Type | Description |
|---|---|---|
name | "warning" | "info" | "search" | "check" | "close" | "plus" | "chevronDown" | "chevronLeft" | "chevronRight" | "settings" | "copy" | "arrowUpRight" | "package" | "upload" | "moon" | "sun" | "sliders" | "code" | "layers" | "complete" | undefinedDefault: "info" | Field name used in form submission. |
source | LucideIcon | undefined | A Lucide component for icons outside the built-in map. |
size | number | undefinedDefault: 18 | Size within the shared component scale. |
label | string | undefined | A meaningful visible or accessible label. |
className | string | undefined | Additional CSS class names. |
Accessibility & interaction
Preserve semantic structure and communicate meaning with text rather than color alone.
Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.
Variants & implementation notes
A curated Lucide name map with a source prop for custom Lucide icons. Decorative icons are hidden; meaningful icons require a label.
Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.