Design system
Documentation experienceDS-07

Home / Components / Empty State

Approved

Empty State

Provide the governed NexWell Empty State contract for data display interfaces.

Purpose

Provide the governed NexWell Empty State contract for data display interfaces.

Source evidence informs purpose and anatomy; NexWell tokens, accessibility, and API are authoritative.

When to use

Use Empty State only for its documented data display purpose.

When not to use

Do not restyle it into an unrelated interaction.

Anatomy

  1. container
  2. content

Specifications, variants, sizes, and states

Specifications

  • Exact dimensions, padding, gaps, icon sizes, radius, and typography: source-verification-required.
  • Implementation behavior is inspectable below; it is not evidence of founder approval.

Variants and sizes

default

source-verification-required: no governed component-specific size matrix is available

States

default · with action

Measurements and typography

Every field is represented. A status is not a value: unresolved evidence cannot be converted into an implementation number.

Height / widthpartialNo approved exact value may be inferred.
PaddingpartialNo approved exact value may be inferred.
GappartialNo approved exact value may be inferred.
Radius / borderpartialNo approved exact value may be inferred.
Icon sizepartialNo approved exact value may be inferred.
Font / size / weight / line height / trackingpartialNo approved exact value may be inferred.

State matrix

Actual implementation states are listed below. Requested universal states not supported by the component API remain explicitly unclaimed.

DefaultImplemented / inspect preview
Hovernot-applicable-or-source-verification-required
Focusnot-applicable-or-source-verification-required
Active / pressednot-applicable-or-source-verification-required
Disablednot-applicable-or-source-verification-required
Loadingnot-applicable-or-source-verification-required
Errornot-applicable-or-source-verification-required
Successnot-applicable-or-source-verification-required
Readonlynot-applicable-or-source-verification-required
Emptynot-applicable-or-source-verification-required

React and TypeScript API

Public properties

approved-current Generated from the package registry; controls expose only the supported subset listed here.

titledescriptionaction
import { EmptyState } from "@nexwellaifactory/components";
// title
// description
// action

export function Example() {
  return <EmptyState />;
}

Open stable isolated canvas

Usage and content

Do

Use the component for its documented purpose.

Don’t

Do not restyle it into an unrelated interaction.

Content rules

  • Use concise, task-specific labels.
  • Do not communicate state through color alone.
  • Allow localized text to wrap without hiding critical actions.

Accessibility, keyboard, responsive, and RTL

Accessibility

  • Native semantics first
  • Accessible name required
  • State exposed programmatically

Keyboard

  • Native element behavior
  • Visible focus indicator
  • No positive tabindex

Responsive and RTL

Wraps or scrolls without hiding critical content; supports 200% text expansion.

Uses logical layout; mirrors only spatial meaning.

Actual package output

Interactive example

No saved items

Items you save will appear here.

Preview width changes the bounded canvas; use the RTL control below to inspect logical layout.

Token mapping and source evidence

Traceable implementation

Uber-derived structural evidence, adapted through approved NexWell decisions.

semantic colorfoundation spacingfoundation shapefoundation motion

docs/source-audit/component-evidence-matrix.csv :: empty-state

Missing fields in the source remain documented source absence, not requirements invented by the implementation.

Evidence completeness

14 associated local source records. Statuses below come directly from the DS-13 Checkpoint 1 component evidence matrix.

overviewpartial
anatomypartial
variantspartial
sizespartial
dimensionspartial
paddingpartial
gapspartial
icon_sizespartial
typographypartial
width_behaviorpartial
content_behaviorpartial
truncation_wrappingpartial
statespartial
accessibilitypartial
keyboardpartial
responsivepartial
rtlpartial
motionpartial
react_apipartial
token_mappingpartial
implementation_mappingpartial
visual_redlinessource-verification-required
testspartial

Cross-platform implementation

React / TypeScript: current package API is shown above.

Flutter: source-verification-required — no canonical Flutter API or implementation mapping exists, and this web portal does not infer one.

AI agents: consume approved records only; preserve proposed and unresolved statuses and import the public component instead of recreating it.