Badge

The Badge is a component that can be used in conjunction with a Card component or on its own. It shows the text inside a flag-like box in the top- left corner of the card. By default the box is brand-colored, but a custom color can be set as well. When used with the Card component, it can be used e.g. to specifically highlight its contents or to give some additional information about how the content of this exact card differs from other cards. When used without the Card component, it can be used as a tag e.g. above headings inside a Hero component.

Usage

The badge can simply be imported from the design system like this:

import Badge from "@finanzchef24gmbh/design-system/src/Badge";

Props

• The outset determines how far the badge will stand out from the border of the card.
• The shouldWrap determines whether the badge will have the little wrap around the card look.
• The color determines the color of the badge.
• The outline determines whether the badge has an outline.

<Card>
  <Badge outset="small">This is special!</Badge>
  <Spacings.Inset>Hello World</Spacings.Inset>
</Card>

<Badge shouldWrap={false}>This is special!</Badge>

<Badge shouldWrap outset="small" outline>
  This is special outset small true!
</Badge>

<Badge shouldWrap={false} color="accent" outline={true}>
  <Text color="accent">Test</Text>
</Badge>

<Badge color="auxiliary">
  <Text isOnDarkBackground>Test me with other color</Text>
</Badge>