A small count/status indicator overlapping the corner of its child (pp_badge/1), in the spirit of MUI's Badge.

<.pp_badge content={4}>
  <.pp_icon name="hero-bell" />
</.pp_badge>

<.pp_badge variant="dot" color="success">
  <.pp_icon name="hero-user" />
</.pp_badge>

content is rendered as-is, except when it's an integer greater than max (default 99), which renders as "#{max}+" — the same badgeContent/max behavior as MUI's Badge, and only for integers; a string content is never truncated.

The badge is automatically hidden (nothing rendered but the child) when:

• invisible={true} is passed explicitly, or
• content is the integer 0 and show_zero is false (the default), or
• content is nil and variant is "standard" (there's nothing to show).

A variant="dot" badge with no content stays visible (a blank colored dot, e.g. an "online" status indicator) — only the 0/show_zero rule above can hide it, matching MUI's own Badge exactly (including the perhaps-surprising case of a dot badge with content={0}, which is still hidden unless show_zero is set).

overlap ("rectangular" default, or "circular") pulls the badge further inward for a circular child (e.g. an avatar) so it still reads as overlapping the visible circle instead of floating off past its corner — the same distinction MUI's overlap prop makes; anchor_origin (default "top-right") picks which corner.

Deliberately no color="default" (MUI's own default): every other color attr in this library is primary/secondary/tertiary/error plus success/warning/info for status (see PhoenixPaper.Alert) — adding an eighth, gray "default" here just for Badge would be a new token this library otherwise never needs. color defaults to "error" instead, since an unread/notification count (the most common real-world Badge) reads immediately as attention-grabbing red — pass color="primary" (or any other token) for a neutral count.

The wrapping <span>'s relative inline-flex shrink-0 is not gated by paperize — like Autocomplete's dropdown-anchor wrapper (see AGENTS.md), it's the minimum structure the badge needs to position itself at all, not part of the "paper" skin. paperize={false} still drops every class from the badge dot/pill itself (size, color, absolute position, everything) — same all-or-nothing contract as everywhere else, meaning a paperize={false} badge needs its own class to be positioned and colored at all (compare PhoenixPaper.Snackbar's paperize={false}, which has the same trade-off for the same reason).