Badge

Component for short notes with one color as status messages

A <Badge> is a content component. This component can be used to reflect status messages via a short note and a color.

Anatomy

It consists of a container and the content can either be a text or an icon.

Anatomy of badge component

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Variant
Size
The selected theme does not has any options for "size".
basic
PropertyTypeDescription
variantdefault | primary | success | warning | info | errorThe available variants of this component.
size-The available sizes of this component.

Usage

A <Badge> is a component used to provide information on new updates and notifications. It is used with other components and cannot be used alone. The content of a badge can be arbitrary, but it is preferred to use a string and/or a icon.

Text Label Length

The Badge is a simple and compact component for use in a limited space in the context of more complex components. When it includes a text label, make sure it fits into the dedicated space.

Do
Do: Use short and precise text labels.
Use short and precise text labels.
Don't
Don't: Use long descriptions for labels.
Don't use long descriptions for labels.

Color

As the Badge is used as an indicator, its color must be precise and relevant to the message that the badge conveys.

Do
Do: Use the colors wisely and according to the meaning that the Badge implies.

Use the colors wisely and according to the meaning that the Badge implies.

Don't
Don't: Avoid using arbitrary colors that would not match the message that the Badge conveys.

Avoid using arbitrary colors that would not match the message that the Badge conveys.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
children?
ReactNode;
Children of the component
Last update: 6 months ago