Badge
It is an element used to provide information about new updates and notifications, and providing additional information. It is combined with components such as avatar, icons and buttons
Variants
The variant determines which the badge is displayed, and thus where and what it should be used for.
dot- used to show an update of an existing menu or service, a dot is displayed near the icon or text buttonstatus- used to show the user status, it used with Avataricon- used to show the type of user with an icon, it used with Avatartext- used to show the type of user with a letter, used with Avatarnumber- used to show the number of notifications, used with Avatar, near the icon or text button
BadgeBosons
Color
Color from the Tailwind palette.
type:
stringdefault:
primaryvalues:
primary, secondary, warning, info, success, dangerSize
Bagde size.
type:
stringdefault:
mdvalues:
xs, sm, md, lg, xlVariant
Rresponsible for the variant in which it is displayed
type:
stringdefault:
dotvalues:
dot, number, text, status, iconValue
Number for number variant.
type:
IntText
Text for text variant.
type:
stringExamples
Default dot badge sizes
xs
sm
md
lg
xl
Badge with dot variant is without border.
1// Default dot Badge size
2
3@protons.Badge(
4 &protons.BadgeBosons{
5 Size: "md",
6 },
7)Status badge sizes
xs
sm
md
lg
xl
1// Status Badge size
2
3@protons.Badge(
4 &protons.BadgeBosons{
5 Variant: "status",
6 Size: "md",
7 },
8)Colors of badge
current
primary
secondary
warning
danger
success
info
1// Default dot Badge size with success color
2
3@protons.Badge(
4 &protons.BadgeBosons{
5 Color: "success",
6 Size: "md",
7 },
8)Icon badge
xs
sm
md
lg
xl
1// Badge with icon
2
3@protons.Badge(
4 &protons.BadgeBosons{
5 Variant: "icon"
6 Size: "md",
7 },
8) {
9 @icons.IconTimes()
10}Text badge
xs
H
sm
H
md
H
lg
H
xl
H
1// Text Badge
2
3@protons.Badge(
4 &protons.BadgeBosons{
5 Variant: "text"
6 Size: "md",
7 },
8)Number badge
xs
5
sm
5
md
5
lg
5
xl
5
1// Number Badge
2
3@protons.Badge(
4 &protons.BadgeBosons{
5 Value: 5,
6 Variant: "number",
7 Size: "md",
8 },
9)Number badge (with big number)
xs
99+
sm
99+
md
99+
lg
99+
xl
99+
1// Number Badge
2
3@protons.Badge(
4 &protons.BadgeBosons{
5 Value: 999,
6 Variant: "number",
7 Size: "md",
8 },
9)