GlassTile
One object in glass on a small squircle, for an empty place: the landing's pillar objects, small, turning slowly round.
An empty place
The Inbox with nothing open: a conversation in the studio's glass over the words that say what to do. The glyph is 48px, 24px of the tint's wash around it.
Pick a conversation to read it.
import { GlassTile } from "@/components/shared/glass-tile";
import { MessageMultiple01Icon } from "@hugeicons/core-free-icons";
<GlassTile icon={MessageMultiple01Icon} tint="studio" />
<p className="aura-muted text-sm">Pick a conversation to read it.</p>Tints
<GlassTile icon={CalendarCheckIcon} tint="studio" />
<GlassTile icon={UserLove01Icon} tint="studio-2" />
<MixScope mix="lagoon">
<GlassTile icon={RepeatIcon} tint="studio" />
</MixScope>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | IconSvgElement | — | A Hugeicons stroke-rounded glyph, cast in glass. |
| tint | "studio" | "studio-2" | — | The glass's colour, and the tile's wash at 10%. |
| className | string | — | Placement. |
Guidelines
- Decoration only: it's hidden from assistive tech, so the words beside it say what the place is for.
- One to a view. Each draws its own WebGL canvas; it stands still under reduced motion, and flat where WebGL can't draw.