AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Badge
Displays a badge or a component that looks like a badge.
BadgeSecondaryDestructiveOutline
templ
templ BadgeDemo() {
<div class="flex flex-wrap gap-2">
@ui.Badge(ui.BadgeVariantDefault, "", nil) {
Badge
}
@ui.Badge(ui.BadgeVariantSecondary, "", nil) {
Secondary
}
@ui.Badge(ui.BadgeVariantDestructive, "", nil) {
Destructive
}
@ui.Badge(ui.BadgeVariantOutline, "", nil) {
Outline
}
</div>
}