Icon Badge

Decorative icon container with semantic color intents and hover effects

Basic Usage

pnpm add @corew500/ui

import { IconBadge } from "@corew500/ui/icon-badge"

<IconBadge>Content</IconBadge>

Axis	Values	Default
`variant`	softoutlinesolid	soft
`intent`	defaultprimarysecondaryaccentdestructivesuccesswarninginfo	default
`size`	smdefaultlgxl	default
`rounded`	defaultfull	default
`hoverEffect`	nonescalepulseglow	none

soft

outline

solid

Intents

default

primary

success

warning

destructive

info

Prop	Type	Default	Description
`icon*`	enum	—	Icon element to display (required). The icon will be automatically sized based on the `size` prop.
`variant`	enum	`soft`	—
`intent`	enum	`default`	—
`size`	enum	`default`	—
`rounded`	enum	`default`	—
`hoverEffect`	enum	`none`	—

When used in interactive contexts (e.g., inside a button), ensure parent has proper ARIA

- Icons are purely decorative - the `span` wrapper is not interactive by default
Color alone does not convey meaning - pair with text labels for clarity

- Component is purely visual; no text content to translate
If using in interactive context, ensure parent provides translated accessible name