Buttons & Chips

Pure CSS components. Buttons use the native <button> element with optional modifier classes. Chips are compact labels or filters. Badges display counts or statuses.

Buttons

Loading state

Chips

Use .chips as a container and .chip on each item. Add .clickable for hover effects, .closeable for a close button.

Default
Clickable
Closeable
Accent
Success
Warning
Error
Outline

Badge

Compact status labels. Supports soft (default), solid, and outline styles plus size variants and dot indicators.

Default Info Success Warning Error
Solid info Solid success Solid warning Solid error
Outline Info Success
Small Default Large