Core Examples
Accessible React components with Base UI and Yumma CSS.
Base
Standard implementation with default configuration.
Danger
Uses a red accent to indicate destructive actions.
Disabled
Prevents interaction with reduced visual emphasis.
Ghost
Removes visible border and background until hover.
Link
Renders as a navigational Link element.
Secondary
Reduces visual weight compared to primary.
Subtle
Reduces visual emphasis with lighter styling.
Group Examples
Groups, nesting, and parent-child relationships.
Group
Wraps items in a Group container.
Group Icon
Adds an Icon element to the group.
Group Pill
Icon-only pill buttons separated by dividers.
Group Pill Label
Pill buttons with icon and label separated by dividers.
Icon Examples
Icon-only buttons and decorative configurations.
Icon Only
Displays an Icon without accompanying text labels.
Icon Pill
Renders an Icon inside Pill styling.
Leading
Positions the Icon at the start of the content.
Trailing
Positions the Icon at the end of the content.
Size Examples
Sizes from compact to large.
Large
Expanded size for emphasis or easier targeting.
Medium
Standard default size.
Small
Compact size for constrained spaces.
Shape Examples
Shapes from sharp to fully rounded.
Square
Applies sharp corners with no br-(value).
Squircle
Applies a smooth continuous curve between adjacent corners.
More Examples
Additional variants and interactive states.
Circle
Renders as a perfect circle using br-50%.
Favorite
Shows a Favorite or bookmark indicator.
Loading
Shows a Skeleton while content processes.
Pill
Applies fully rounded ends using br-9999.
Static
Renders without motion wrappers or interactive animations.