nori-ui

Empty

Empty-state container with optional icon, title, description, and action.

View as JSONOpen in Storybook
PreviousNext
2.1 kBgzipped

At a glance

  • Use for zero-results views, onboarding prompts, and placeholder states.
  • Renders a centered column: icon → title → description → action.
  • All slots except title are optional.

Preview

Usage

import { Empty, Button } from '@nori-ui/core';
 
// Minimal
<Empty title="No results found" />
 
// With description
<Empty
  title="No results found"
  description="Try adjusting your search or filters."
/>
 
// Full
<Empty
  icon={<SearchIcon size={48} />}
  title="No results found"
  description="Try adjusting your search or filters to find what you're looking for."
  action={<Button onPress={onReset}>Clear filters</Button>}
/>

Props

PropTypeDefaultDescription
title*string—Required heading text.
actionReactNode—Optional action slot — typically a `<Button>`.
classNamestring——
descriptionstring—Optional secondary description below the title.
iconReactNode—Optional icon or illustration rendered above the title.
testIDstring——
Edit on GitHub

Previous

DropdownMenu

Next

Field

On this page

Preview theme