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.

Leading

Positions the Icon at the start of the content.

---

Pill Leading

Renders a leading Icon inside Pill styling.

---

Pill Trailing

Renders a trailing Icon inside Pill styling.

---

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.

---

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.