Neo-Brutalist Angular Sticker

Sticker

SVG-backed callout stickers for launches, cards, badges, and decorative bursts. The component auto-scales text inside jagged sticker shapes and includes a small face primitive for the star sticker.

4Shapes

10Tones

Source ↗Open Docs

Preview

GROW
YOUR
SELF

LIMITED
DROP

Usage

Import

import { NbSticker, NbStickerFace } from '@ng-brutalism/ui';

Template

<nb-sticker shape="burst" tone="mint" [rotate]="-8">
  NEW<br />
  JOB!
</nb-sticker>
<nb-sticker shape="burst-wide" tone="yellow" [rotate]="5">
  LIMITED<br />
  DROP
</nb-sticker>
<nb-sticker shape="star" tone="pink" aria-label="Happy sticker">
  <nb-sticker-face />
</nb-sticker>
<nb-sticker shape="splat" tone="blue" decorative />

Shapes

BURST

burst

WIDE

burst-wide

star

splat

Tones

default

yellow

pink

mint

lavender

blue

accent

success

warning

danger

Rotation

-12

+12

API

Input	Type	Default	Description
shape	'burst' \| 'burst-wide' \| 'star' \| 'splat'	'burst'	Outer SVG shape.
tone	'default' \| 'cream' \| 'white' \| 'black' \| 'yellow' \| 'pink' \| 'mint' \| 'lavender' \| 'blue' \| 'primary' \| 'secondary' \| 'accent' \| 'success' \| 'warning' \| 'danger'	'mint'	Background fill token.
decorative	boolean	false	Marks purely visual stickers as hidden from assistive tech.
rotate	number \| undefined	shape default	Optional CSS rotation in degrees.