Components34

An eyebrow kicker badge with an accent square and uppercase, letter spaced label for section headings.

A monospace eyebrow badge that wraps its label in brackets, with a vertical orientation option.

A status badge with a pulsing dot for availability, live states, and system health.

A metric delta badge with trend arrows for dashboards, stat rows, and pricing tables.

A rotating circular text badge with a center icon for editorial seals and open for work stamps.

A decorative barcode badge with a monospace caption for editorial and print inspired sections.

A star rating badge with a numeric value and review text for social proof sections.

A marker highlight badge that draws a highlighter stroke behind key words in headlines.

A testimonial badge with an avatar stack, star rating, and social proof text for hero sections.

A stat badge with an icon, bold value, and label for quick hero metrics.

A profile badge with avatar, name, and role for author and team credits.

A toast style notification badge with an icon tile, title, and description for product updates.

A live countdown badge for launches and limited offers, SSR safe with a finished state.

A tag group badge that renders wrapping chips for services, skills, and topics.

A trusted by logo strip badge with grayscale logos that regain color on hover.

An announcement pill badge with a bold tag, message, and optional link arrow for hero sections.

A keyboard shortcut badge with real keycaps for command palettes and developer tools.

An uppercase pill button with a trailing seal arrow chip and an optional link.

A minimal text button with an animated underline and arrow for lightweight calls to action.

An async loading button that shows a spinner and disables itself while a promise resolves.

An accessible icon button with a required label, three sizes, and circle or square shape.

A split button with a main action and a separate secondary trigger for menus and options.

A social proof button with an avatar stack inside the pill and a trailing arrow.

A video play button with a circular play seal, label, and duration for showreels and product demos.