FeaturedIcon

An icon inside a tinted circle, used to headline empty, success, and error states, dialogs, and feature callouts.

Examples

Default

<FeaturedIcon color="accent" icon={Sparkles} size="md" />

Sizes

<div className={styles.row}>
  {sizes.map(size => (
    <FeaturedIcon key={size} {...args} size={size} />
  ))}
</div>

Colors

accent

success

error

warning

info

blue

cyan

gray

green

orange

pink

purple

red

teal

yellow

<div className={styles.grid}>
  {colors.map(color => (
    <div className={styles.colorItem} key={color}>
      <FeaturedIcon {...args} color={color} />
      <Text>{color}</Text>
    </div>
  ))}
</div>

Statuses

<div className={styles.row}>
  <FeaturedIcon {...args} color="success" icon={Check} />
  <FeaturedIcon {...args} color="error" icon={X} />
  <FeaturedIcon {...args} color="warning" icon={TriangleAlert} />
  <FeaturedIcon {...args} color="info" icon={Info} />
</div>

In Empty State

Response link unavailable

This link is no longer valid. Please use the link from your most recent reminder.

Return home

<Card className={styles.card}>
  <EmptyState
    actions={<Button label="Return home" variant="primary" />}
    description="This link is no longer valid. Please use the link from your most recent reminder."
    illustration={<FeaturedIcon color="error" icon={X} size="lg" />}
    title="Response link unavailable"
  />
</Card>

API

FeaturedIcon

An icon inside a tinted circle, used to headline empty, success, and error states, dialogs, and feature callouts.

Prop	Type	Default	Description
aria-label	string	—	Accessible label. When omitted the icon is treated as decorative and hidden from assistive technology.
className	string	—	Additional CSS class names applied to the root element.
color	"error" | "info" | "success" | "warning" | "red" | "orange" | "yellow" | "green" | "teal" | "cyan" | "blue" | "purple" | "pink" | "gray" | "accent"	'accent'	Color of the tinted background and icon.
data-testid	string	—	Test ID applied to the root element.
icon*	IconComponent	—	Lucide icon component to render.
ref	Ref<HTMLSpanElement>	—	Ref forwarded to the root element.
size	"sm" | "md" | "lg"	'md'	Size of the circle; the icon scales with it.
style	CSSProperties	—	Inline styles applied to the root element.