Home
Previous componentNext component

Sticker avatar

Open in fibo's Storybook

Sticker avatar is an avatar cut out like a die-cut sticker. A white paper edge follows the shape of a transparent image, each sticker sits at its own slight angle, and status is a small sticker of its own on the corner.

Sticker avatarHover it. The sticker lifts off the page, and the dot on its corner says fibo is here.

Anatomy

A square layout box named as an image. The cut is drawn once on a canvas when the image loads, then shown as a plain image past the box's edges.

Three cutsA transparent cut-out follows its shape. A photo with a background becomes round. With no image, the letters themselves are cut out.

Variants and states

Status by shapeA solid dot, a crescent and a ring, so each reads without color.
Without tilt or liftFor grids people scan, where a hand-placed angle gets in the way.
24
32
40
64
96
SizesThe edge grows with the sticker: 2px up to 40, 4px at 64, 6px at 96.
StackStickerAvatarGroup overlaps stickers, and StickerAvatarCount counts the rest.

Usage

  • 01Use it where people and personality are the point: profiles, parties, member lists, a small group in a chat header.
  • 02Keep the layout box tight. The edge and tilt are drawn outside it, so leave a few pixels of room around stickers in a dense list.
  • 03Turn off tilt where stickers line up in a grid people scan, such as a table of members. Keep it in stacks and profiles, where it reads as hand-placed.
  • 04Use pixelated for pixel art, so it scales with hard edges instead of blurring.

In a list

At 32px the edge and tilt are small enough for a dense list. Each row carries group/sticker, so hovering anywhere on it lifts the sticker.

Hover a row. Its sticker lifts.

Tokens

--sticker-edge is white and --sticker-ink is near-black in both themes. That's deliberate: a sticker is paper, and paper doesn't change color when the room gets dark. A hairline and a shadow keep the white edge visible on a light page.

The status sticker is the exception. Its disc is the page color, because it's colored with the status tokens: success for present, warning for away and muted-foreground for offline. Set statusColor={false} to draw the marks in the foreground color instead.

Best practices

DoLet the edge follow the size. The default stays in proportion.
Don'tDon't thicken the edge past the default. The paper swamps the subject.

Accessibility

  • 01The root is role="img", named by name and the status: “Ana Ruiz, Away”. Pass statusLabel to translate the status.
  • 02Inside a row or button that already says the name, set aria-hidden on the sticker so the name isn't read twice.
  • 03Status never relies on color alone. Each state has its own shape, and its label is in the accessible name.
  • 04The hit area and layout are the square box, not the cut, so an odd shape is no harder to click.
  • 05With reduced motion the sticker keeps its tilt and shadow but doesn't lift.

References