StickerButton

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 { StickerButton } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

Usage

Use the button branch for actions and the href branch for navigation. Loading is intentionally valid only for buttons.

tsx

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

export default function StickerButtonExample() {
  return (
    <StickerButton
      tone="acid"
      leading={<span aria-hidden="true">✦</span>}
      trailing={<span aria-hidden="true">→</span>}
    >
      {"Make it stick"}
    </StickerButton>
  );
}

Examples

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

Open the related recipe →

API

StickerButtonProps 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
`href`	segmented	`"button"`	Choose native button or anchor semantics.
`children`	text	`"Make it stick"`	Set the visible action label.
`tone`	select	`"acid"`	Choose the action surface tone.
`size`	segmented	`"default"`	Choose compact, default, or large target geometry.
`shape`	segmented	`"paper"`	Use label, paper, or pill when semantically appropriate.
`leading`	boolean	`true`	Show authored leading content.
`trailing`	boolean	`true`	Show authored trailing content.
`fullWidth`	boolean	`false`	Fill the available preview row.
`loading`	boolean	`false`	Preserve dimensions and suppress duplicate activation.
`reducedMotion`	select	`"system"`	Use system motion preference or always choose static feedback.

Presets

DefaultTactile button action.
Editorial linkNative anchor branch.
LoadingStable busy state.

Accessibility

Native button and anchor semantics provide expected activation, URL operations, and focus behavior.

Motion and reduced motion

Press feedback switches through color, outline, and hard-shadow state without spatial translation.

Touch and small screens

All named sizes retain practical touch geometry and fullWidth is available when a mobile flow needs it.

SSR and React Server Components

The unmarked leaf is server-compatible for serializable button or anchor output; interactive callbacks need a client consumer.

Performance

Tactile feedback is CSS-only, loading preserves dimensions, and no runtime animation dependency is loaded.

Constraints

Do not use loading on anchors, hide meaningful text behind a spinner, or turn every action into the loudest control.

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 ↗