Components

Base Badge

A customizable badge component built with Base UI and useRender hook for composition.

Installation

pnpm dlx shadcn@latest add https://reui.io/r/base-badge.json

Examples

Outline

Light

Ghost

Disabled

Size

Circle

Square

With Icon

With Dot

Remove Button

Render Prop

API Reference

This component supports both Base UI's useRender hook pattern and traditional asChild prop for backward compatibility.

Badge

Prop	Type	Default
`render`	~~React.ReactElement~~	`<span />`
`asChild`	~~boolean~~	`false`
`variant`	~~enum~~	`primary`
`appearance`	~~enum~~	`default`
`size`	~~enum~~	`md`
`shape`	~~enum~~	`default`
`disabled`	~~boolean~~	`false`

BadgeButton

Prop	Type	Default
`render`	~~React.ReactElement~~	`<button />`
`asChild`	~~boolean~~	`false`

BadgeDot

This is a simple span element with no additional props beyond standard HTML attributes.

Credits

Built with Base UI useRender hook.

PreviouseAvatar NextBreadcrumb

On This Page

Installation
Examples
API Reference
Credits