foundation primitive

StickerBadge

Label, select, and remove with native semantics.

alpha@scout-ui/react

Install Source ↗Report issue ↗

Live · bounded

StickerBadge preview

Fresh signal

Code

Deterministic React output

Generated code

Plain TSX ready

import { StickerBadge } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

export default function StickerBadgeExample() {
  return (
    <StickerBadge
      tone="cyan"
      rotation={-1}
    >
      {"Fresh signal"}
    </StickerBadge>
  );
}

Open full playground →

Install

Scout UI is in alpha preflight and is not represented here as a public npm release. Inside the workspace, consume the frozen package contract by name.

tsx

import { StickerBadge } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

Usage

Choose static for labels, select for aria-pressed choice state, and remove for a whole-badge named removal action.

tsx

import { StickerBadge } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

export default function StickerBadgeExample() {
  return (
    <StickerBadge
      tone="cyan"
      rotation={-1}
    >
      {"Fresh signal"}
    </StickerBadge>
  );
}

Examples

Inspect a complete authored setting, then adapt it without copying private implementation details.

Open the related recipe →

API

StickerBadgeProps is part of the frozen alpha surface. The table below is generated from the same typed schema that powers presets, preview, Copy Code, share URLs, and Copy AI Prompt.

Prop	Control	Default	Contract
`mode`	segmented	`"static"`	Choose static label, selection, or whole-badge removal semantics.
`children`	text	`"Fresh signal"`	Set the compact visible label.
`tone`	select	`"cyan"`	Choose an expressive semantic tone.
`shape`	segmented	`"label"`	Use label, stamp, or a true pill.
`size`	segmented	`"default"`	Choose compact, default, or large target geometry.
`rotation`	range	`-1`	Keep compact label rotation within a restrained range.
`selected`	boolean	`false`	Set the pressed selection state.

Presets

DefaultStatic label.
SelectedPressed selection state.
RemoveWhole-badge remove action.

Accessibility

Select and remove modes render native buttons. Static mode renders a span and stays out of the tab order.

Motion and reduced motion

Selection and press remain visible through marks, borders, tone, and depth without translation.

Touch and small screens

Badge rows wrap in reading order and use native button targets; no horizontal drag is required.

SSR and React Server Components

The unmarked leaf can render static serializable modes on the server; callbacks require a consumer Client Component.

Performance

Badge state is ordinary native control rendering with no continuous work or animation loop.

Constraints

A remove badge is one button, never a nested button. Compose separate sibling controls when selection and removal are both needed.

Source

Inspect the implementation and tests in the public Scout UI repository. Code uses MIT licensing; official artwork uses its separately documented asset license.

Open the public source file ↗