Badge - Keep React

The Badge component in the Keep React allows you to add visual indicators or labels to highlight specific information or provide additional context. With customizable options for style, size, type, icon, and state, you can create versatile badges that fit your design needs.

Table of Contents#

Default Badge#

The default badge is a versatile component that allows you to add visual indicators or labels to highlight specific information. It offers a simple yet effective way to enhance your design.

Default Badge

Colors of Badge#

Here are the available color variants for the Badge component, each with its own unique color scheme: primary secondary success warning and error.

Primary
Secondary
Success
Warning
Error

Variant of Badge#

The Badge component offers three variants: variant="base", variant="border", and variant="background". These variants provide options for different visual styles, allowing you to choose the one that best suits your design and effectively highlights the badge content.

Primary
Secondary
Success
Warning
Error
Primary
Secondary
Success
Warning
Error
Primary
Secondary
Success
Warning
Error

API Reference#

Explore the available props for the Badge component

PropertyDescriptionTypeDefault
colorAvailable Badge color.
primary
secondary
success
warning
error
secondary
variantVariant the badge
base
border
background
background