Icon Frame
Icon Frame is a decorative container that wraps an icon in a themed circle or rounded square.
Import#
import { IconFrame } from '@volue/wave-react';
Examples#
Default#
Shape#
IconFrame supports two shapes. The default is circle.
Pick square when the frame is embedded in a rounded rectangular container, so its corners match the surroundings — see the App header actions example.
Size#
Matches the icon-only Button sizes. The inner SvgIcon is sized automatically — no need to pass size on it.
Variant and color#
subtle (default) applies a soft background; strong applies a saturated background with an inverse foreground.
Anchored#
Compose IconFrame with Anchor to attach a framed icon to a corner of another element.
API Reference#
Prop | Type | Default |
|---|---|---|
as | enum | div |
shape | enum | "circle" |
size | enum | "medium" |
variant | enum | "subtle" |
color | enum | "neutral" |
css | StitchesCss | No default value |