Icon
Displays an icon from the built-in icon set. Use icons to add visual context to labels, buttons, cards, and other elements.
<Icon name="map-pin" size="xl" color="primary" />
Props
| Prop | Type | Default | Description |
|---|
| name | string | — | The icon to display. Available icons include star, map-pin, check-circle, mail, phone, calendar, search, globe, profile, document, sparkle, bolt, info, lightbulb, and more. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" | Controls the rendered size of the icon. |
| color | string | — | Sets the icon color. Accepts theme tokens like primary, secondary, success, danger, etc. |
Browse the full icon set by typing <Icon name=" in the code editor — autocomplete will show all available options.
Image
Displays an image with flexible sizing, fitting, and theme-aware source support.
<Image src={productImage} width={120} height={120} radius="md" fit="cover" />
<Image
src={{ light: lightLogo, dark: darkLogo }}
width={200}
height={60}
fit="contain"
/>
Props
| Prop | Type | Default | Description |
|---|
| src | string | { light: string, dark: string } | — | Image source URL. Pass an object with light and dark keys to display different images based on the active theme. |
| alt | string | — | Alternative text for accessibility. |
| size | number | — | Square shorthand — sets both width and height to the same value. |
| width | number | — | Image width in pixels. |
| height | number | — | Image height in pixels. |
| minWidth | number | — | Minimum width constraint. |
| maxWidth | number | — | Maximum width constraint. |
| minHeight | number | — | Minimum height constraint. |
| maxHeight | number | — | Maximum height constraint. |
| minSize | number | — | Minimum size shorthand (applies to both dimensions). |
| maxSize | number | — | Maximum size shorthand (applies to both dimensions). |
| aspectRatio | number | — | Aspect ratio for the image container (e.g., 16/9). |
| radius | string | — | Border radius token (e.g., "sm", "md", "lg", "full"). |
| background | string | — | Background color behind the image. |
| flex | number | — | Flex grow/shrink value for layout sizing. |
| fit | "cover" | "contain" | "fill" | "scale-down" | "none" | — | How the image fills its container, matching the CSS object-fit property. |
| position | "center" | "top" | "bottom" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right" | "center" | Alignment of the image within its container when fit causes cropping. |
| frame | boolean | — | When true, wraps the image in a subtle border frame. |
| flush | boolean | — | When true, removes default padding around the image. |
| onClickAction | string | — | Function name to invoke when the image is clicked. |
Use fit="cover" with a fixed width and height to crop images into consistent thumbnails. Use fit="contain" when you need to show the full image without cropping.
Badge
A small label used to indicate status, categories, or tags.
<Badge label="Active" color="success" variant="soft" />
<Badge label="Overdue" color="danger" variant="solid" pill />
Props
| Prop | Type | Default | Description |
|---|
| label | string | — | The text displayed inside the badge. |
| color | "secondary" | "success" | "danger" | "warning" | "info" | "discovery" | "secondary" | Semantic color of the badge. |
| variant | "solid" | "soft" | "outline" | "soft" | Visual style. solid uses a filled background, soft uses a tinted background, and outline shows only a border. |
| size | "sm" | "md" | "lg" | "sm" | Controls the size of the badge. |
| pill | boolean | — | When true, applies fully rounded corners for a pill shape. |
Combine badges with layout components to build tag lists or status indicators inside cards and tables.
Transition
Wraps a child element with a fade-in and fade-out animation. Use this to add polish when content appears or disappears — for example, when toggling visibility with states.
<Transition>
<Text value="This fades in" />
</Transition>
Transition works well with States to animate content that conditionally appears based on user input or data changes. 
