React Badges
Enterprise-grade badges in the language of industrial software: soft status washes with a dot plus label (state is never color alone), solid and outline variants, and monospaced technical tags for environments, versions, and silicon specs. Flat, sharp-cornered, token-driven.
Status — soft wash, dot + label
Operational
Degraded
Fault
Maintenance
Offline
Solid
Primary
Neutral
Critical
Outline
Default
Primary
Muted
Technical — mono, for environments, versions, specs
PROD
STAGING
v2.4.1
AXI4-128
16nm
SILICON-PROVEN
Interactive
Sizes
xs
sm
md
lg
Installation
You can add this component to your project using the CLI or by manually copying the code.
npx shadcn@latest add badge.json
Usage
after installing the component, import it into your page or component file. The Badge
component is the main component that you will use. It has many props that you can use to customize it.
Loading...
Props
The Badge component accepts the following props for comprehensive customization:
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | - | No | The content to display inside the badge |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | No | Controls the size of the badge |
| shape | 'rounded' | 'pill' | 'square' | 'circle' | 'rounded' | No | Defines the shape of the badge |
| animation | 'none' | 'pulse' | 'bounce' | 'float' | 'glow' | 'shake' | 'rotate' | 'scale' | 'gradient-shift' | 'none' | No | Applies animation effects to the badge |
| position | 'static' | 'absolute' | 'fixed' | 'sticky' | 'static' | No | CSS position property for the badge |
| iconLeft | ReactElement | - | No | Icon to display on the left side of the badge content |
| iconRight | ReactElement | - | No | Icon to display on the right side of the badge content |
| badge | string | number | - | No | Notification badge to display (e.g., count) |
| loading | boolean | false | No | Shows a loading spinner when true |
| className | string | - | No | Additional CSS classes for custom styling |
| style | React.CSSProperties | {} | No | Inline styles for the badge |
| blur | 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'none' | No | Backdrop blur effect intensity |
| opacity | number | - | No | Opacity value for the badge (0-1) |
| shadow | 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'none' | No | Shadow effect for the badge |
| glow | boolean | false | No | Adds a glowing effect to the badge |
| animationDuration | 'fast' | 'normal' | 'slow' | 'normal' | No | Duration of animations and transitions |
| disabled | boolean | false | No | Disables the badge and applies disabled styling |
| active | boolean | false | No | Applies active state styling |
| onDismiss | (event: MouseEvent<HTMLButtonElement>) => void | - | No | Callback when dismiss button is clicked |
| onHover | (event: MouseEvent<HTMLElement>) => void | - | No | Callback when badge is hovered |
| onFocus | (event: React.FocusEvent<HTMLElement>) => void | - | No | Callback when badge receives focus |
| onClick | (event: MouseEvent<HTMLButtonElement>) => void | - | No | Makes badge clickable as a button |
| href | string | - | No | Makes badge a link to the specified URL |
| top | string | number | - | No | Top position for absolute/fixed positioned badges |
| right | string | number | - | No | Right position for absolute/fixed positioned badges |
| bottom | string | number | - | No | Bottom position for absolute/fixed positioned badges |
| left | string | number | - | No | Left position for absolute/fixed positioned badges |
| zIndex | number | - | No | Z-index for layering positioned badges |
| aria-label | string | - | No | Accessibility label for screen readers |
| aria-describedby | string | - | No | ID of element that describes the badge |
| role | string | - | No | ARIA role for accessibility |
Examples
Here are some examples of how to use different props:
Loading...