Badge

Badges are used to highlight an item's status for quick recognition.

Import#

import { Badge } from '@nature-ui/core';

Usage#

Default
Editable Example

Badge Color#

Pass the color prop to customize the color of the Badge. color can be any color key that exists in theme.colors. Learn more about theming.

DefaultSuccessRemovedNew
Editable Example

Badge Variants#

Pass the variant prop and set it to either subtle, solid, or outline to get a different style.

DefaultSuccessRemoved
Editable Example

Composition#

Divine Nature New

Software Engineer

Editable Example

Props#

NameTypeDefaultDescription
variantsolid, subtle, outlinesubtleThe style variant of the badge
colorstringgray-500The color scheme to use for the badge. Must be a key in theme.colors