English
VietnameseDark
variant="dark"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgapp/components/ui/badge
Badge
Toàn bộ tổ hợp appearance, màu sắc và kích thước hiện có. Mỗi hàng minh họa badge chỉ có text, có dot, có icon, có nút xoá và shape hình tròn.
5 appearances8 colors4 sizes6 content forms
Default · Soft bordered
appearance="default"Danger
variant="destructive"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgWarning
variant="warning"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgSuccess
variant="success"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgInfo
variant="info"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgPrimary
variant="primary"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgSecondary
variant="secondary"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgPink
variant="pink"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgSolid
appearance="solid"Dark
variant="dark"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgDanger
variant="destructive"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgWarning
variant="warning"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgSuccess
variant="success"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgInfo
variant="info"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgPrimary
variant="primary"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgSecondary
variant="secondary"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgPink
variant="pink"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgLight
appearance="light"Dark
variant="dark"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgDanger
variant="destructive"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgWarning
variant="warning"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgSuccess
variant="success"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgInfo
variant="info"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgPrimary
variant="primary"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgSecondary
variant="secondary"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgPink
variant="pink"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgOutline
appearance="outline"Dark
variant="dark"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgDanger
variant="destructive"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgWarning
variant="warning"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgSuccess
variant="success"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgInfo
variant="info"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgPrimary
variant="primary"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgSecondary
variant="secondary"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgPink
variant="pink"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgGhost
appearance="ghost"Dark
variant="dark"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgDanger
variant="destructive"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgWarning
variant="warning"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgSuccess
variant="success"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgInfo
variant="info"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgPrimary
variant="primary"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgSecondary
variant="secondary"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlgPink
variant="pink"SizeTextDot · TextIcon · TextIcon · Text · Rounded fullDismissibleCircle
xssmmdlg