Core Examples
Accessible React components with Base UI and Yumma CSS.
Base
Standard implementation with default configuration.
Close
Adds a close button for manual dismissal.
Close Pill
Adds a close button with Pill styling.
Count
Displays a numeric Count indicator.
Count Pill
Displays a numeric count with Pill styling.
Dot
Shows a small Dot indicator.
Dot Pill
Shows a Dot indicator with Pill styling.
Pill
Applies fully rounded ends using br-9999.
Icon Examples
Icon-only buttons and decorative configurations.
Icon
Replaces or supplements text with an Icon element.
Icon Dot
Combines an Icon with a Dot indicator.
Icon Dot Pill
Combines an Icon with a Dot inside Pill styling.
Icon Pill
Renders an Icon inside Pill styling.
Icon Right
Positions the Icon on the right side.
Icon Right Dot
Positions an Icon and Dot on the right side.
Icon Right Dot Pill
Positions an Icon and Dot on the right with Pill styling.
Icon Right Pill
Positions an Icon on the right with Pill styling.
Size Examples
Sizes from compact to large.
Small
Compact size for constrained spaces.
Medium
Standard default size.
Large
Expanded size for emphasis or easier targeting.
Shape Examples
Shapes from sharp to fully rounded.
Square
Applies sharp corners with no border-radius.
Squircle
Applies a smooth continuous curve between adjacent corners.