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.
Outlined
Applies a visible border with transparent background.
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.
Icon Examples
Icon-only buttons and decorative configurations.
Icon
Replaces or supplements text with an Icon element.
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.
Secondary with Icon
Secondary style with an additional Icon element.
Trailing
Positions the Icon at the end of the content.
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.
More Examples
Additional variants and interactive states.
Animated
Adds motion animations for interactive feedback.
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.