Product Strategy

Components

Comprehensive catalog of all reusable UI components following vanilla CSS/JS principles.

Button Components

Comprehensive button examples demonstrating sizes, variants, and patterns for user actions and interactions.

Button Variants

Button Sizes

Buttons with Icons

Icon-Only Buttons

Button States

Button with Dropdown Indicator

Button Toolbar

Attached Button Group

Badge Components

Status indicators, counts, and labels for categorizing and highlighting content.

Badge Variants

Neutral Primary Success Warning Danger Info

Badge Sizes

Small Medium (Default) Large

Badge Styles

Solid Outline Subtle

Status Badges with Indicators

Online Away Offline Idle

Badges in Context

Task Title

Due in 2 days

In Progress

This card demonstrates a badge used as a status indicator in a header.

Categories: Design Development Research

Interactive Badges

Empty State Components

Communicate absence of data with clear messaging and suggested actions.

Basic Empty State

No data available

There's nothing to display here yet.

Empty State with Actions

No projects yet

Create your first project to get started with organizing your work.

Compact Empty State

Recent Activity

No recent activity

Activity will appear here as you work.

Contextual Variations

No search results

Try adjusting your search terms or filters.

Access restricted

You don't have permission to view this content.

Unable to load data

An error occurred while fetching information.

Skeleton Loader Components

Loading placeholders that mirror actual content structure for perceived performance.