Skip to content

Latest commit

 

History

History
75 lines (54 loc) · 1.31 KB

README.mdx

File metadata and controls

75 lines (54 loc) · 1.31 KB
Raw
name menu route
Badge
Components
/components/badge

Badge

⚠️ This component is deprecated.

It's still available but planned for removal.

Use design system Badge instead.

Migration guide

Set proper size

Set size="small" if size wasn't set.

<Badge>Active</Badge> -> <Badge size="small">Active</Badge>

Change size props

xsmall -> small

small -> default

<Badge size="xsmall">Example</Badge> -> <Badge size="small">Example</Badge>
<Badge size="small">Example</Badge> -> <Badge>Example</Badge>

Outdated documentation

Default size count and labeling component

<Badge color="bulma.100" backgroundColor="dodoria.100">
  Active
</Badge>

Customize colours

You coud simply use color and backgroundColor props

<Inline>
  <Badge color="bulma.100" backgroundColor="piccolo.100">
    Active
  </Badge>
  <Badge color="krillin.100" backgroundColor="gohan.100">
    Active
  </Badge>
  <Badge color="bulma.100" backgroundColor="dodoria.100">
    Active
  </Badge>
</Inline>

Customize size

You coud simply use size prop. By default size is xSmall. You can change it to Small.

<Inline>
  <Badge backgroundColor="piccolo.100">xSmall size</Badge>
  <Badge backgroundColor="piccolo.100" size="small">
    small size
  </Badge>
</Inline>