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.