# EmptyState
**Also known as:** Empty, NoData, ZeroState, BlankSlate
## Description
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.
## 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. |
| 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. |
## 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. |
## Enums
### 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. |
## Sub Classes
### 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. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| 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. |
## Examples
\n**Basic**:
```razor
```
\n**Actions**:
```razor
@if (tasks.Count == 0)
{
Add a task
Learn more
}
else
{
Clear the tasks
}
```
```csharp
private readonly List tasks = [];
private void AddTask() => tasks.Add($"Task {tasks.Count + 1}");
```
\n**Templates**:
```razor
No results for "blue widget"
Check the spelling, or browse every product instead.
```
\n**Heading**:
```razor
Add a person
Clear
```
```csharp
private readonly List people = [];
private void AddPerson() => people.Add($"Person {people.Count + 1}");
```
\n**Alignment**:
```razor
Clear the filters
```
\n**External Icons**:
```razor
نوشتن پیام
```
@tasks.Count task(s) added.
@person