Chakra-UI

I♥️Components

Badge

|

Chakra Docs

|

⦾ In UI design, badges are often used to highlight specific attributes or to draw attention to updates or changes. For instance, badges can be used to mark items as new, indicate a change of status, or simply to count the number of items in a collection. In the Chakra UI library, the Badge component is a versatile tool that makes the implementation of these use-cases straightforward and easy.

The Badge component offers an easy and effective way to highlight information or mark updates within your application. With the various customization options like color, variant, and size, you can adapt the badge to your exact needs. Remember that badges, like any other UI element, should be used judiciously to ensure a clean and user-friendly experience.

These Badge component can be imported as follows:

Examples

Basic Usage

⦾ By default, the badge is light gray with a small amount of padding around the text. However, Chakra UI allows for extensive customization of the Badge component. Here is how you can add a default badge to your application.
Default Badge

Code

Customizing Badge Color

⦾ You can change the color of the badge by using the colorScheme prop. This prop can take any color key that exists in the theme colors. In this example, each badge is given a different color scheme, making it easy to differentiate between them.
Default BadgePink Badge: CautionGreen Badge: SuccessPurple Badge: Lovely

Code

Badge Variants

⦾ Badges in Chakra UI come with three variant styles: 'outline', 'solid', and 'subtle'. By changing the variant prop, you can easily switch between these styles. In the following example, each badge uses the 'purple' color scheme but displays a different variant.
Outline VariantSolid VariantSubtle Variant

Code

Incorporating Badges

⦾ One of the strengths of Chakra UI is the ease with which its components can be combined. Badges can be easily integrated with other components to create complex UI elements. In the following example, the Badge is used alongside the Avatar, Box, Flex, VStack, HStack, and Text components. Here, a badge indicating 'New' is attached next to a user's name, showing that the user is a new addition to the team.

Jasper Jenkins

New

Rabble Rouser

Code

Customizing Badge Size

⦾ You can easily adjust the size of the badge by passing a value to the fontSize prop. In this example, the badge is smaller than the surrounding text, offering a more subtle presentation.

Jasper JenkinsNew

Code

Did you know?

Creative Idea No. 1

Badge as a status indicator in a list: One creative use-case is using badges as status indicators in a list of items. For example, imagine you have a list of tasks. Each task could have a badge indicating its status (e.g., "In Progress", "Completed", "On Hold"). In this example, VStack and HStack are used to arrange the items and their corresponding badges vertically and horizontally, respectively.

Finish project report

In Progress

Update client on project status

Completed

Organize project files

On Hold

Code

Creative Idea No. 2

Badge as a count display: Badges can be used to display a count of items. This is useful in scenarios where you want to show the number of new messages, notifications, or updates. Here, a badge is used to indicate the number of new notifications on a bell icon button.

Code

Creative Idea No. 3

Combining Badge with Tooltip: While a badge provides a good way to show short information, sometimes you might want to provide more details when users hover over it. Chakra UI's Tooltip component can be combined with Badge to achieve this. In this example, when a user hovers over the "In Progress" badge, they are provided with additional information about what this status means. This can be especially useful when using color codes or less common status descriptions.
In Progress

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.