Playground

GlassPill

media

label

Floating glass chip for labeling content on images and video

Category tags, status indicators, and info pills on media

Three variants: glass (frosted), dark (ink), light (white)

import { GlassPill } from "@everydayos/ui";

Usage

Glass, light, and dark variants at different sizes on imagery

Glass default

Glass small

Glass large

Light

Dark

With trailing

API

variant

Default: glass

glassdarklight

defaultpreferredrare

size

Default: default

smdefaultlg

defaultpreferredrare

Prop	Type	Default
`trailing`	`React.ReactNode`	—
`className`	`string`	—
`children`*	`React.ReactNode`	—

Examples

Configurator Controls

Glass pills as floating configurator controls over product imagery

Apartment

3 rooms

4 people

Status Indicators

Small pills with icons for live status on media

22°C

57%

Active

Composition

Pairs well with

MediaFrame

MediaCard

Layer

Inline

Stack

When to avoid

Need an action — use Button variant='glass' instead
Need a status tag outside media — use Badge instead
Need large text area on image — use Layer with Stack

Patterns

Floating Controls on Media

MediaFrame

Layer

GlassPill

Stack

Glass pill controls floating on an image, positioned with Layer

<MediaFrame
  aspect="4/3"
  radius="sm"
  contentPadding={false}
  media={<Image src="/room.jpg" fill className="object-cover" alt="" />}
>
  <Layer position="center">
    <Stack spacing="sm">
      <GlassPill trailing={<ChevronDown className="size-3.5 opacity-60" />}>
        Apartment
      </GlassPill>
      <GlassPill trailing={<ChevronDown className="size-3.5 opacity-60" />}>
        3 rooms
      </GlassPill>
    </Stack>
  </Layer>
</MediaFrame>

Multi-Layer Status

MediaFrame

Layer

GlassPill

Inline

Multiple Layer components for status indicators at different positions

<MediaFrame
  aspect="video"
  radius="sm"
  contentPadding={false}
  media={<Image src="/room.jpg" fill className="object-cover" alt="" />}
>
  <Layer position="top-left">
    <Inline spacing="sm">
      <GlassPill size="sm" variant="dark">Live</GlassPill>
      <GlassPill size="sm">22°C</GlassPill>
    </Inline>
  </Layer>
  <Layer position="bottom-center" overlay="gradient-bottom">
    <Stack spacing="xs" align="center">
      <Heading as="h3" size="m" className="text-white">Living Room</Heading>
      <Text size="s" className="text-white/50">Air quality: Excellent</Text>
    </Stack>
  </Layer>
</MediaFrame>