UI Buttons & Badges Catalog — 15 Named Patterns

.bb-hierarchy

Button Hierarchy

Primary / Secondary / Ghost / Danger / Link-style in one row.

Primary

Secondary

Ghost

Danger

Link

.bb-sizes

Button Sizes

Small / Medium / Large primary and secondary scale.

Primary

Secondary

.bb-states

Button States

Default, hover, focus, disabled, loading, and destructive confirm pair.

Interactive

Destructive confirm

.bb-icon-only

Icon-Only Buttons

Circular and square icon buttons — solid and ghost — with accessible names.

Square · solid

Round · ghost

.bb-icon-label

Icon + Label Buttons

Leading and trailing icons with text — Download, Share, Add item.

.bb-icon-toolbar

Compact icon toolbar with a floating action button accent.

.bb-chips

Static Tag Chips

Soft colored tags for Trail, Hut, Booking, Gear.

Trail Hut Booking Gear Harbor Studio

.bb-chips-dismiss

Removable Chips

Tag chips with dismiss controls (`data-bb-dismiss`).

Ridge Hut Overnight Stove kit 2 guests

.bb-chips-filter

Multi-select toggle chips with aria-pressed.

.bb-status

Status Badges

Success / Warning / Danger / Info / Neutral — solid and soft pairs.

Solid

Success Warning Danger Info Neutral

Soft

Success Warning Danger Info Neutral

.bb-count

Count Badges

Notification counts on icons/buttons and avatar with count.

.bb-status-row

Status Row

Inline status dots + label badges for table-like booking rows.

Ridge Hut · Sep 18–20

#NS-4821 · 2 guests

Confirmed

Harbor Studio desk · gear hold

#NS-4830 · awaiting deposit

Pending

Alpine Traverse · group of 6

#NS-4799 · weather hold

Cancelled

Trail Stove Kit · outbound

Carrier · Harbor Freight

In transit

.bb-pills-segment

Segmented Control

Single-select pill group — Day | Week | Month.

.bb-pills-tabs

Pill Tabs

Soft pill strip for view switch — Overview | Guests | Gear.

.bb-pills-multi

Multi-Select Pills

Amenity filters with Clear — Wi‑Fi, Parking, Pets, Hot tub.

Amenities