element-plus/docs/en-US/component/badge.md
jeremywuuuuu 74fa835f9f fix(docs): add extra field for frontmatter
- Add `type` into frontmatter field to avoid crowdin auto wrap
2021-10-25 14:26:50 +08:00

2.0 KiB

lang type
en-US component

Badge

A number or status mark on buttons and icons.

Basic usage

Displays the amount of new messages.

:::demo The amount is defined with value which accepts Number or String.

badge/basic

:::

Max value

You can customize the max value.

:::demo The max value is defined by property max which is a Number. Note that it only works when value is also a Number.

badge/max

:::

Customizations

Displays text content other than numbers.

:::demo When value is a String, it can display customized text.

badge/customize

:::

Little red dot

Use a red dot to mark content that needs to be noticed.

:::demo Use the attribute is-dot. It is a Boolean.

badge/dot

:::

Attributes

Attribute Description Type Accepted Values Default
value display value string / number
max maximum value, shows '{max}+' when exceeded. Only works if value is a Number number
is-dot if a little dot is displayed boolean false
hidden hidden badge boolean false
type button type string primary / success / warning / danger / info

Slots

Name Description
customize default content