Skip to main content

Badge

The TkBadge component allows you to create a small badge for adding information like contextual data that needs to stand out and get noticed. It is also often useful in combination with other elements like a user avatar to show a number of new messages.

import { TkBadge } from '@takeoff-ui/react'

Variant​

The variant of the badge for styling.

View Code
<TkBadge variant="primary" label="primary" />
<TkBadge variant="secondary" label="secondary" /> 
<TkBadge variant="neutral" label="neutral" />
<TkBadge variant="info" label="info" />
<TkBadge variant="warning" label="warning" />
<TkBadge variant="success" label="success" />
<TkBadge variant="danger" label="danger" />
<TkBadge variant="verified" label="verified" />
<TkBadge variant="purple" label="purple" />
<TkBadge variant="cyan" label="cyan" />
<TkBadge variant="business" label="business" />

Type​

This prop specifies the design type of the component. "filled", "filledlight", "outlined", "text" designs are available

View Code
<TkBadge variant="primary" type="filled" label="primary" />
<TkBadge variant="primary" type="filledlight" label="primary" />
<TkBadge variant="primary" type="outlined" label="primary" />
<TkBadge variant="primary" type="text" label="primary" />

Size​

The "size" prop can be used with one of the sizes "small", "base", and "large". The default value is "base"

View Code
<TkBadge variant="primary" size="large" type="filledlight" label="primary" />
<TkBadge variant="primary" size="base" type="filledlight" label="primary" />
<TkBadge variant="primary" size="small" type="filledlight" label="primary" />

Icon​

It can be used with icons. You can also specify the icon direction. You should use Material Symbols icons.

View Code
<TkBadge
  variant="primary"
  size="large"
  type="filled"
  icon="flight"
  label="primary"
/>
<TkBadge
  variant="primary"
  size="large"
  type="filled"
  icon="flight"
  iconPosition="right"
  label="primary"
/>
<TkBadge
variant="primary"
size="large"
type="filled"
icon={
  {
    left: { name: 'key', color: 'pink' } as IIconOptions,
    right: { name: 'check_circle', color: 'pink', fill: true } as IIconOptions,
  } as IMultiIconOptions
}
label="primary"
/>

Count​

The count property can be used in more compact cases where only numbers will be shown.


View Code
<TkBadge variant="purple" size="large" type="filledlight" count="11" rounded />
<TkBadge variant="purple" size="base" type="filledlight" count="11" rounded />
<TkBadge variant="purple" size="small" type="filledlight" count="11" rounded />

Floating​

You can use slot for floating mode

View Code
<TkBadge variant="danger" type="filled" dot>
  <div
    style={{ width: "24px", height: "24px", background: "lightgrey" }}
  ></div>
</TkBadge>
<TkBadge variant="secondary" size="small" type="filled" count="4" rounded>
  <div
    style={{ width: "24px", height: "24px", background: "lightgrey" }}
  ></div>
</TkBadge>

API​

Props​

NameTypeDefaultDescription
number, stringnullDefines the number for the element.
booleanfalseIf true, shows a small dot on the badge.
IIconOptions, IMultiIconOptions, stringnullSpecifies a material icon name to be displayed.
"left", "right"'left'Defines the position of the icon.
stringnullDefines the label for the element.
booleanfalseMakes the badge corners rounded.
"base", "large", "small"'base'Sets size for the component.
"filled", "filledlight", "outlined", "text"'filled'This field specifies the design type of the component.
"business", "cyan", "danger", "info", "neutral", "primary", "purple", "secondary", "success", "verified", "warning"'primary'Determines the badge's variant for different styles.