Empty State

<afp-empty-state>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

Empty states are used to communicate that there is no data to display, no search results, or an error occurred.

<afp-empty-state
  description="There are no items to display at this time.">
</afp-empty-state>

<afp-empty-state
  [description]="'There are no items to display at this time.'">
</afp-empty-state>

<AfpEmptyState
  description="There are no items to display at this time.">
</AfpEmptyState>

<AfpEmptyState
  :description="'There are no items to display at this time.'">
</AfpEmptyState>

Examples #

Use the header attribute to include a header section in the content.

No sales available

<afp-empty-state
  header
  description="There are no sales records for the selected period. Try adjusting the date range or filters.">
  <h3 slot="header">No sales available</h3>
</afp-empty-state>

<afp-empty-state
  header
  [description]="'There are no sales records for the selected period. Try adjusting the date range or filters.'">
  <h3 slot="header">No sales available</h3>
</afp-empty-state>

<AfpEmptyState
  header
  description="There are no sales records for the selected period. Try adjusting the date range or filters.">
  <h3 slot="header">No sales available</h3>
</AfpEmptyState>

<AfpEmptyState
  header
  :description="'There are no sales records for the selected period. Try adjusting the date range or filters.'">
  <h3 slot="header">No sales available</h3>
</AfpEmptyState>

No Data Type #

Use the no-data type when there is no data to display (e.g., empty tables).

No sales available

<afp-empty-state
  emptyStateType="no-data"
  description="There are no sales records for the selected period. Try adjusting the date range or filters."
  primaryAction="Adjust Filters"
  secondaryAction="Create New Entry">
  <h3 slot="header">No sales available</h3>
</afp-empty-state>

<afp-empty-state
  emptyStateType="no-data"
  [description]="'There are no sales records for the selected period. Try adjusting the date range or filters.'"
  primaryAction="Adjust Filters"
  secondaryAction="Create New Entry">
  <h3 slot="header">No sales available</h3>
</afp-empty-state>

<AfpEmptyState
  emptyStateType="no-data"
  description="There are no sales records for the selected period. Try adjusting the date range or filters."
  primaryAction="Adjust Filters"
  secondaryAction="Create New Entry">
  <h3 slot="header">No sales available</h3>
</AfpEmptyState>

<AfpEmptyState
  emptyStateType="no-data"
  :description="'There are no sales records for the selected period. Try adjusting the date range or filters.'"
  primaryAction="Adjust Filters"
  secondaryAction="Create New Entry">
  <h3 slot="header">No sales available</h3>
</AfpEmptyState>

No Results Type #

Use the no-results type when a search or filter returns no matching items.

No results found

<afp-empty-state
  header
  emptyStateType="no-results"
  description="We couldn't find any items matching your search. Try using different keywords or remove some filters."
  primaryAction="Clear Search"
  secondaryAction="Reset Filters">
  <h3 slot="header">No results found</h3>
</afp-empty-state>

<afp-empty-state
  header
  emptyStateType="no-results"
  [description]="'We couldn't find any items matching your search. Try using different keywords or remove some filters.'"
  primaryAction="Clear Search"
  secondaryAction="Reset Filters">
  <h3 slot="header">No results found</h3>
</afp-empty-state>

<AfpEmptyState
  header
  emptyStateType="no-results"
  description="We couldn't find any items matching your search. Try using different keywords or remove some filters."
  primaryAction="Clear Search"
  secondaryAction="Reset Filters">
  <h3 slot="header">No results found</h3>
</AfpEmptyState>

<AfpEmptyState
  header
  emptyStateType="no-results"
  :description="'We couldn't find any items matching your search. Try using different keywords or remove some filters.'"
  primaryAction="Clear Search"
  secondaryAction="Reset Filters">
  <h3 slot="header">No results found</h3>
</AfpEmptyState>

Error Type #

Use the error type when data could not be loaded or a feature is not available.

Unable to load data

<afp-empty-state
  header
  emptyStateType="error"
  description="Something went wrong while loading your data. Please try again later or contact support if the problem persists."
  primaryAction="Try Again"
  secondaryAction="Contact Support">
  <h3 slot="header">Unable to load data</h3>
</afp-empty-state>

<afp-empty-state
  header
  emptyStateType="error"
  [description]="'Something went wrong while loading your data. Please try again later or contact support if the problem persists.'"
  primaryAction="Try Again"
  secondaryAction="Contact Support">
  <h3 slot="header">Unable to load data</h3>
</afp-empty-state>

<AfpEmptyState
  header
  emptyStateType="error"
  description="Something went wrong while loading your data. Please try again later or contact support if the problem persists."
  primaryAction="Try Again"
  secondaryAction="Contact Support">
  <h3 slot="header">Unable to load data</h3>
</AfpEmptyState>

<AfpEmptyState
  header
  emptyStateType="error"
  :description="'Something went wrong while loading your data. Please try again later or contact support if the problem persists.'"
  primaryAction="Try Again"
  secondaryAction="Contact Support">
  <h3 slot="header">Unable to load data</h3>
</AfpEmptyState>

Custom Icon #

Use the icon property to specify a custom icon name, or use the icon slot for full control.

No documents

<afp-empty-state
  icon="folder"
  header
  description="You haven't uploaded any documents yet. Start by uploading your first document."
  primaryAction="Upload Document">
  <h3 slot="header">No documents</h3>
</afp-empty-state>

<afp-empty-state
  [icon]="'folder'"
  header
  [description]="'You haven't uploaded any documents yet. Start by uploading your first document.'"
  primaryAction="Upload Document">
  <h3 slot="header">No documents</h3>
</afp-empty-state>

<AfpEmptyState
  icon="folder"
  header
  description="You haven't uploaded any documents yet. Start by uploading your first document."
  primaryAction="Upload Document">
  <h3 slot="header">No documents</h3>
</AfpEmptyState>

<AfpEmptyState
  :icon="'folder'"
  header
  :description="'You haven't uploaded any documents yet. Start by uploading your first document.'"
  primaryAction="Upload Document">
  <h3 slot="header">No documents</h3>
</AfpEmptyState>

Compact Size #

Use the compact size for use within cards, tables, or smaller containers.

No items

<afp-card>
  <afp-empty-state
    size="compact"
    emptyStateType="no-data"
    header
    description="This list is empty."
    primaryAction="Add Item">
  <h3 slot="header">No items</h3>
  </afp-empty-state>
</afp-card>

<afp-card>
  <afp-empty-state
    [size]="'compact'"
    emptyStateType="no-data"
    header
    [description]="'This list is empty.'"
    primaryAction="Add Item">
  <h3 slot="header">No items</h3>
  </afp-empty-state>
</afp-card>

<AfpCard>
  <AfpEmptyState
    size="compact"
    emptyStateType="no-data"
    header
    description="This list is empty."
    primaryAction="Add Item">
  <h3 slot="header">No items</h3>
  </AfpEmptyState>
</AfpCard>

<AfpCard>
  <AfpEmptyState
    :size="'compact'"
    emptyStateType="no-data"
    header
    :description="'This list is empty.'"
    primaryAction="Add Item">
  <h3 slot="header">No items</h3>
  </AfpEmptyState>
</AfpCard>

Standard Size (Full Page) #

Use the standard size (default) for full-page or section placeholders.

Your inbox is empty

<afp-empty-state
  size="standard"
  icon="inbox"
  header
  description="You're all caught up! New messages will appear here when you receive them.">
  <h3 slot="header">Your inbox is empty</h3>
</afp-empty-state>

<afp-empty-state
  [size]="'standard'"
  [icon]="'inbox'"
  header
  [description]="'You're all caught up! New messages will appear here when you receive them.'">
  <h3 slot="header">Your inbox is empty</h3>
</afp-empty-state>

<AfpEmptyState
  size="standard"
  icon="inbox"
  header
  description="You're all caught up! New messages will appear here when you receive them.">
  <h3 slot="header">Your inbox is empty</h3>
</AfpEmptyState>

<AfpEmptyState
  :size="'standard'"
  :icon="'inbox'"
  header
  :description="'You're all caught up! New messages will appear here when you receive them.'">
  <h3 slot="header">Your inbox is empty</h3>
</AfpEmptyState>

Without Actions #

Empty states can be displayed without action buttons when no immediate action is needed.

No notifications

<afp-empty-state
  header
  emptyStateType="no-data"
  description="You have no new notifications at this time.">
  <h3 slot="header">No notifications</h3>
</afp-empty-state>

<afp-empty-state
  header
  emptyStateType="no-data"
  [description]="'You have no new notifications at this time.'">
  <h3 slot="header">No notifications</h3>
</afp-empty-state>

<AfpEmptyState
  header
  emptyStateType="no-data"
  description="You have no new notifications at this time.">
  <h3 slot="header">No notifications</h3>
</AfpEmptyState>

<AfpEmptyState
  header
  emptyStateType="no-data"
  :description="'You have no new notifications at this time.'">
  <h3 slot="header">No notifications</h3>
</AfpEmptyState>

With Primary Action Only #

Display only a primary action when there's one main action to take.

No team members

<afp-empty-state
  icon="people"
  header
  description="Your team doesn't have any members yet. Invite colleagues to collaborate."
  primaryAction="Invite Members">
  <h3 slot="header">No team members</h3>

</afp-empty-state>

<afp-empty-state
  [icon]="'people'"
  header
  [description]="'Your team doesn't have any members yet. Invite colleagues to collaborate.'"
  primaryAction="Invite Members">
  <h3 slot="header">No team members</h3>

</afp-empty-state>

<AfpEmptyState
  icon="people"
  header
  description="Your team doesn't have any members yet. Invite colleagues to collaborate."
  primaryAction="Invite Members">
  <h3 slot="header">No team members</h3>

</AfpEmptyState>

<AfpEmptyState
  :icon="'people'"
  header
  :description="'Your team doesn't have any members yet. Invite colleagues to collaborate.'"
  primaryAction="Invite Members">
  <h3 slot="header">No team members</h3>

</AfpEmptyState>

Custom Content #

Use the default slot to add custom content below the description.

No upcoming events

Check back later or create a new event to get started.

<afp-empty-state
  icon="calendar"
  header
  description="You don't have any events scheduled.">
  <h3 slot="header">No upcoming events</h3>
  <p>Check back later or create a new event to get started.</p>
</afp-empty-state>

<afp-empty-state
  [icon]="'calendar'"
  header
  [description]="'You don't have any events scheduled.'">
  <h3 slot="header">No upcoming events</h3>
  <p>Check back later or create a new event to get started.</p>
</afp-empty-state>

<AfpEmptyState
  icon="calendar"
  header
  description="You don't have any events scheduled.">
  <h3 slot="header">No upcoming events</h3>
  <p>Check back later or create a new event to get started.</p>
</AfpEmptyState>

<AfpEmptyState
  :icon="'calendar'"
  header
  :description="'You don't have any events scheduled.'">
  <h3 slot="header">No upcoming events</h3>
  <p>Check back later or create a new event to get started.</p>
</AfpEmptyState>

Custom Actions Slot #

Use the actions slot for full control over the action buttons.

Your cart is empty

Browse Products

View Wishlist

<afp-empty-state
  icon="cart"
  header
  description="Add items to your cart to see them here.">
  <h3 slot="header">Your cart is empty</h3>
  <div slot="actions">
    <afp-button appearance="filled" variant="brand">Browse Products</afp-button>
    <afp-button appearance="outlined">View Wishlist</afp-button>
  </div>
</afp-empty-state>

<afp-empty-state
  [icon]="'cart'"
  header
  [description]="'Add items to your cart to see them here.'">
  <h3 slot="header">Your cart is empty</h3>
  <div slot="actions">
    <afp-button [appearance]="'filled'" [variant]="'brand'">Browse Products</afp-button>
    <afp-button [appearance]="'outlined'">View Wishlist</afp-button>
  </div>
</afp-empty-state>

<AfpEmptyState
  icon="cart"
  header
  description="Add items to your cart to see them here.">
  <h3 slot="header">Your cart is empty</h3>
  <div slot="actions">
    <AfpButton appearance="filled" variant="brand">Browse Products</AfpButton>
    <AfpButton appearance="outlined">View Wishlist</AfpButton>
  </div>
</AfpEmptyState>

<AfpEmptyState
  :icon="'cart'"
  header
  :description="'Add items to your cart to see them here.'">
  <h3 slot="header">Your cart is empty</h3>
  <div slot="actions">
    <AfpButton :appearance="'filled'" :variant="'brand'">Browse Products</AfpButton>
    <AfpButton :appearance="'outlined'">View Wishlist</AfpButton>
  </div>
</AfpEmptyState>

Custom Icon Slot #

Use the icon slot to provide a completely custom icon element.

Custom Icon

<afp-empty-state
  header
  description="This example uses a custom icon in the slot.">
  <h3 slot="header">Custom Icon</h3>
  <afp-icon slot="icon" name="star-fill"></afp-icon>
</afp-empty-state>

<afp-empty-state
  header
  [description]="'This example uses a custom icon in the slot.'">
  <h3 slot="header">Custom Icon</h3>
  <afp-icon [slot]="'icon'" [name]="'star-fill'"></afp-icon>
</afp-empty-state>

<AfpEmptyState
  header
  description="This example uses a custom icon in the slot.">
  <h3 slot="header">Custom Icon</h3>
  <AfpIcon slot="icon" name="star-fill"></AfpIcon>
</AfpEmptyState>

<AfpEmptyState
  header
  :description="'This example uses a custom icon in the slot.'">
  <h3 slot="header">Custom Icon</h3>
  <AfpIcon :slot="'icon'" :name="'star-fill'"></AfpIcon>
</AfpEmptyState>

Custom CSS Properties #

Customize the appearance using CSS custom properties.

No favorites

<afp-empty-state
  icon="heart"
  header
  description="You haven't added any favorites yet."
  style="--afp-empty-state-icon-color: var(--afp-color-pink-400); --afp-empty-state-icon-size: 4rem;">
  <h3 slot="header">No favorites</h3>
</afp-empty-state>

<afp-empty-state
  [icon]="'heart'"
  header
  [description]="'You haven't added any favorites yet.'"
  [style]="'--afp-empty-state-icon-color: var(--afp-color-pink-400); --afp-empty-state-icon-size: 4rem;'">
  <h3 slot="header">No favorites</h3>
</afp-empty-state>

<AfpEmptyState
  icon="heart"
  header
  description="You haven't added any favorites yet."
  style="--afp-empty-state-icon-color: var(--afp-color-pink-400); --afp-empty-state-icon-size: 4rem;">
  <h3 slot="header">No favorites</h3>
</AfpEmptyState>

<AfpEmptyState
  :icon="'heart'"
  header
  :description="'You haven't added any favorites yet.'"
  :style="'--afp-empty-state-icon-color: var(--afp-color-pink-400); --afp-empty-state-icon-size: 4rem;'">
  <h3 slot="header">No favorites</h3>
</AfpEmptyState>

Properties

Learn more about properties.

Name Description Reflects

header

Whether to show the header section.

Type boolean

Default false

description

Optional description text that explains the reason or next step.

Type string | undefined

icon

The name of the icon to display. Uses afp-icon component.

Type string | undefined

primaryAction
primaryaction

Label text for the primary action button.

Type string | undefined

secondaryAction
secondaryaction

Label text for the secondary action button.

Type string | undefined

size

Size variant of the empty state.

Type

AfpEmptyStateSize

Name	Description
`COMPACT`	Compact size for use within cards or tables.
`STANDARD`	Standard size for full-page or section placeholders.

AfpEmptyStateSize

Default AfpEmptyStateSize.STANDARD

emptyStateType
emptystatetype

Predefined variant for common empty state patterns.

Type

AfpEmptyStateType

Name	Description
`NO_DATA`	No data variant (e.g., no sales figures available).
`NO_RESULTS`	No results variant (e.g., search returns no hits).
`ERROR`	Error/Not available variant (e.g., feature not available or data could not be loaded).
`CUSTOM`	Custom variant for user-defined content.

AfpEmptyStateType

Default AfpEmptyStateType.CUSTOM

Events

Learn more about events.

Name	Return	Description
`afp-click`	`{ action: 'primary' \| 'secondary' }`	Emitted when an action button is clicked.

Slots

Learn more about slots.

Name	Description
`default`	The default slot for custom content below the description.
`icon`	Custom icon slot to override the default icon.
`actions`	Custom actions slot to override the default action buttons.
`header`	Slot for the header content.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`icon`	The icon container.	`::part(icon)`
`content`	The content container (header and description).	`::part(content)`
`header`	The header container.	`::part(header)`
`description`	The description element.	`::part(description)`
`actions`	The actions container.	`::part(actions)`
`primary-action`	The primary action button.	`::part(primary-action)`
`secondary-action`	The secondary action button.	`::part(secondary-action)`

CSS Custom Properties

Name	Description	Default
`--afp-empty-state-padding`	The padding inside the empty state container.	`--afp-space-xl`
`--afp-empty-state-gap`	The gap between sections.	`--afp-space-m`
`--afp-empty-state-icon-size`	The size of the icon.	`--afp-size-3xl`
`--afp-empty-state-icon-color`	The color of the icon.	`--afp-color-text-subtle`
`--afp-empty-state-max-width`	The maximum width of the content.	`24rem`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-icon

afp-button

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/empty-state/empty-state.js';

Empty State

Examples #

Header #

No sales available

No Data Type #

No sales available

No Results Type #

No results found

Error Type #

Unable to load data

Custom Icon #

No documents

Compact Size #

No items

Standard Size (Full Page) #

Your inbox is empty

Without Actions #

No notifications

With Primary Action Only #

No team members

Custom Content #

No upcoming events

Custom Actions Slot #

Your cart is empty

Custom Icon Slot #

Custom Icon

Custom CSS Properties #

No favorites

Properties

Events

Slots

CSS Parts

CSS Custom Properties

Dependencies

Importing