AppBadge

Updated: Sep 24, 2026

AppBadge is a small, display-only badge that shows one centered icon on a lifted surface. Reach for it when a tile, card, or row needs a compact visual mark — an app attribution, a pinned indicator — that is not itself a control.

Use layout to position the badge and shapeProvider to choose its silhouette. The component owns its fixed square size, material, drop shadow, glow stroke, and primary icon tint, which keeps badges consistent across their surroundings.

Usage

import { AppBadge } from '@wearables-ui-toolkit/mrbd';
import type { IconSource } from '@wearables-ui-toolkit/mrbd';

export function PinnedTileBadge({ pinIcon }: { pinIcon: IconSource }) {
  return <AppBadge icon={pinIcon} />;
}

Because the badge is intrinsically sized, position it with layout and spacing tokens rather than by giving it a width or height:

.tile {
  position: relative;
}

.tile-badge {
  position: absolute;
  top: var(--uit-spacing-small);
  right: var(--uit-spacing-small);
}

A non-default shape comes from a shape provider, not from CSS. Build the provider once outside render so the badge keeps a stable material. Pick a small corner radius — the badge is small, so a large radius reads as the default circle:

import {
  AppBadge,
  CornerRadius,
  RoundedRectangleShapeProvider,
  type IconSource,
} from '@wearables-ui-toolkit/mrbd';

const ROUNDED_SQUARE = new RoundedRectangleShapeProvider(CornerRadius.XXSMALL);

export function AppTileBadge({ appIcon }: { appIcon: IconSource }) {
  return <AppBadge icon={appIcon} shapeProvider={ROUNDED_SQUARE} />;
}

Set tinted: false on a full-color app icon so it keeps its own colors. Add a label when the badge carries meaning on its own:

<AppBadge
  icon={{ uri: app.iconUrl, tinted: false }}
  role="img"
  aria-label={app.name}
/>

Props

The full prop type is AppBadgeProps. It extends HTMLAttributes<HTMLDivElement> with children omitted — the badge renders exactly one icon and nothing else. Remaining DOM attributes, including data-*, aria-*, role, and event handlers, are forwarded to the root element, and ref resolves to that root div.

Prop	Type	Default	Description
`icon`	`IconSource`	—	Decorative icon centered in the badge. Accepts inline vector data (`{ viewBox, paths }`), an asset handle (`{ uri, tinted? }`), or a bare URL string. Omit it for an empty badge.
`shapeProvider`	`ShapeProvider`	a fully rounded `RoundedRectangleShapeProvider`	Geometry used for clipping and for the material’s fill and stroke paths.
`className`	`string`	`''`	Additional class appended to the component’s own root class.
`style`	`CSSProperties`	—	Inline styles on the root element. The component’s own size wins, so this cannot resize the badge.

Behavior

Fixed size. The badge renders at a component-owned square size and neither grows nor shrinks with its parent, so a badge looks identical wherever it is placed. It also declares its own flex sizing, which keeps a stretching flex row from stealing or adding space.

Material. The badge paints a surface fill that composites with a screen blend against whatever is behind it, plus a drop shadow that lifts it off the underlying content and a glow stroke that keeps its edge readable on the additive-light display. The material is always visible; there is no idle or hidden state.

Corners. The badge draws plain rounded corners from its shape provider rather than measured smooth corners, so its silhouette is correct on the very first frame with no measurement pass.

Icon. The icon slot is optional. When supplied, the icon is centered and sized by the component, and tinted with --uit-color-icon-primary — inline vector data and URL assets are filled with that color. Pass { uri, tinted: false } when the asset is a full-color image that must keep its own palette.

Not interactive.AppBadge sets no role, no tabIndex, and no press or focus states. It never becomes a focus stop on its own.

Accessibility

AppBadge is decorative by default. It exposes no accessible name, and its icon is rendered aria-hidden, so assistive technology skips it entirely.
Prefer folding the badge’s meaning into the accessible name of the control or region it decorates, so screen-reader users get it in context instead of as a separate stop.
When the badge really is standalone information, forward role="img" and a localized aria-label to it; both are passed straight through to the root element.

Recommended patterns

Use AppBadge as a compact mark attached to a larger, labelled object.
Pass a filled, semantically accurate icon.
Change its silhouette through shapeProvider, and construct that provider outside render to keep the material stable.
Set tinted: false on full-color app artwork so it retains its palette.

Avoid

Preserve the component-owned size and flex behavior. Width, height, transform, or flex overrides can make badges inconsistent across layouts.
Use NotificationBadge for a short count or Tag for a short label; AppBadge renders an icon, not text.
AppBadge does not accept children; only icon is rendered.
Use a real control such as Button when the mark is actionable.
Prefer the component over rebuilding its material and icon treatment from a styled container.

NotificationBadge, Avatar, AppControlTile, Shape providers, Icons