AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Empty
Use the Empty component to display an empty state.
No results found
We couldn't find what you searched for. Try searching again.
templ
templ EmptyDemo() {
<div class="flex w-full max-w-sm flex-col items-center justify-center py-12">
@ui.Empty("py-10 px-6", nil) {
@ui.EmptyIcon("", nil) {
@icons.Package(icons.Props{Class: "h-12 w-12"})
}
@ui.EmptyTitle("", nil) {
No results found
}
@ui.EmptyDescription("", nil) {
We couldn't find what you searched for. Try searching again.
}
@ui.EmptyAction("", nil) {
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", nil) {
Browse all
}
}
}
</div>
}