Core Examples
Accessible React components with Base UI and Yumma CSS.
Base
Standard implementation with default configuration.
Default Open
Starts in the open state.
Disabled
Prevents interaction with reduced visual emphasis.
Multiple
Allows the selection of more than one item.
Multiple Default Open
Multi-select that starts in the open state.
Icon Examples
Icon-only buttons and decorative configurations.
Leading
Positions the Icon at the start of the content.
Trailing
Positions the Icon at the end of the content.
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.
Bordered
Adds a visible border around the component.
Ghost
Removes visible border and background until hover.
Multiple Bordered
Allows multi-select with visible borders on items.
Multiple Ghost
Multi-select with ghost button styling.
Multiple Icons Left
Multi-select with icons aligned to the start.
Multiple Subtle
Multi-select with reduced visual emphasis.
No Separator
Removes separator lines between items.
Subtle
Reduces visual emphasis with lighter styling.
Static
Renders without motion wrappers or interactive animations.