Notifications
EmptyState
Bit.BlazorUIEmptyNoDataZeroStateBlankSlate
BitEmptyState is what a page, a panel or a list shows when it has nothing to show - an inbox with no mail, a search with no results, a project with no tasks yet: an icon or an illustration, a title that says so, a line on why or what to do about it, and the actions to get going.
Notes
Without a Title it says "No items found", the NoItemsFound of BitStrings, so translating BitStrings once
translates every empty state of the app - and the empty lists of the other components, which say the same.
It is plain content, not a live region: a list that a search empties while the user looks at it announces that
itself. The title is a heading only where HeadingLevel asks for one.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
With nothing set, an empty state says "No items found". Title and Description put the words of the app in its place.
No items found
No messages
When someone writes to you, it shows up here.
Icon
IconName puts an icon of the built-in Fluent UI icons above the title, and IconTemplate puts any content there
in its place - an illustration, most of the time. The icon only decorates the title, so it is hidden from
screen readers; a template is read as it is written.
Your inbox is empty
When someone writes to you, it shows up here.
No pictures yet
The pictures you upload are kept here.
Actions
The child content is the actions under the text, most of the time the button that adds the first item.
Templates
TitleTemplate and DescriptionTemplate take the place of the title and of the line under it, for words that need more than text.
No results for "blue widget"
Check the spelling, or browse every product instead.
Heading
An empty state that stands for the whole of a page or a section makes its title a heading of the outline of the
page with HeadingLevel, so a screen reader user finds it as they find the other headings. Inside a list it is a
line of the list, which is why the title is no heading by default.
No archived projects
Projects you archive are kept here, out of the way of the ones you work on.
In a list
The EmptyTemplate of a list is where an empty state goes. Here a BitBasicList shows one until a person is
added to it.
No people
The people you add are listed here.
Alignment
The --bit-EmptyState-align variable sets where the parts sit across the empty state: center (the default),
start or end. An empty state at the start of the line suits a narrow panel or a menu.
Nothing matches these filters
Clear a filter to see more.
External Icons
Use icons from external libraries like FontAwesome and Bootstrap Icons with the Icon parameter.
See the BitIconInfo section in the parameters table for usage.
This folder is empty
Your cart is empty
Style & Class
Classes and Styles reach the root, the icon, the title, the line under it and the actions, and the
--bit-EmptyState-* variables restyle the defaults.
Drop files here
Or pick them from your computer.
No notifications
You are all caught up.
No events today
Enjoy the free time.
RTL
Use BitEmptyState in right-to-left (RTL).
صندوق پیام شما خالی است
وقتی کسی برای شما پیام بفرستد، اینجا نمایش داده میشود.
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitEmptyState CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-EmptyState-gap | spacing(1) | Room between the icon, the title, the line under it and the actions. |
| --bit-EmptyState-padding | spacing(4) spacing(2) | Inset of the empty state. |
| --bit-EmptyState-align | center | Where the parts sit across the empty state: center, start or end. The text is aligned the same way. |
| --bit-EmptyState-icon-size | --bit-tpg-fs-4xl | Size of the icon. |
| --bit-EmptyState-icon-color | --bit-clr-fg-sec | Color of the icon. |
| --bit-EmptyState-title-color | --bit-clr-fg-pri | Color of the title. |
| --bit-EmptyState-title-font-size | --bit-tpg-fs-lg | Size of the title. |
| --bit-EmptyState-title-font-weight | --bit-tpg-fw-semibold | Weight of the title. |
| --bit-EmptyState-description-color | --bit-clr-fg-sec | Color of the line under the title. |
| --bit-EmptyState-description-font-size | --bit-tpg-fs-sm | Size of the line under the title. |
| --bit-EmptyState-content-gap | spacing(1) | Room between two actions. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitEmptyState parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The actions under the text of the empty state, most of the time the button that adds the first item. |
| Classes | BitEmptyStateClassStyles? | null | Custom CSS classes for the different parts of the empty state. |
| Description | string? | null | The line under the title, on why there is nothing to show or what to do about it. |
| DescriptionTemplate | RenderFragment? | null | The custom content of the line under the title, which takes the place of Description. |
| HeadingLevel | int? | null | Makes the title a heading of this level (1 to 6) in the outline of the page, for an empty state that stands for the whole of a page or a section. By default the title is no heading, as it is not in a list. |
| Icon | BitIconInfo? | null | The icon above the title, provided as custom CSS classes of an external icon library. Takes precedence over IconName when both are set. |
| IconName | string? | null | The name of the icon above the title, from the built-in Fluent UI icons. By default there is no icon. |
| IconTemplate | RenderFragment? | null | The custom content above the title (an illustration, most of the time), which takes the place of the icon. |
| Styles | BitEmptyStateClassStyles? | null | Custom CSS styles for the different parts of the empty state. |
| Title | string? | null | The title of the empty state. Defaults to BitStrings.NoItemsFound ("No items found"). |
| TitleTemplate | RenderFragment? | null | The custom content of the title, which takes the place of Title. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitEmptyStateClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitEmptyState. |
| Icon | string? | null | Custom CSS classes/styles for the icon of the BitEmptyState, or the element its IconTemplate is rendered in. |
| Title | string? | null | Custom CSS classes/styles for the title of the BitEmptyState. |
| Description | string? | null | Custom CSS classes/styles for the line under the title of the BitEmptyState. |
| Content | string? | null | Custom CSS classes/styles for the element the actions (ChildContent) of the BitEmptyState are rendered in. |
BitIconInfo properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string? | null | Gets or sets the name of the icon. |
| BaseClass | string? | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | string? | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.