State Components

Components for displaying async data states.

---

EmptyState

Props

Prop	Type	Default	Description
title	string	i18n default	Empty state title
description	string	i18n default	Description text
icon	LucideIcon	Inbox	Custom icon
action	EmptyStateAction	-	Primary action
secondaryAction	EmptyStateAction	-	Secondary action
size	'sm' | 'md' | 'lg'	'md'	Container size
variant	StateVariant	'empty'	Icon variant
className	string	-	Container class

EmptyStateAction

Property	Type	Description
label	string	Button label
onClick	() => void	Click handler
icon	LucideIcon	Button icon
variant	ButtonVariant	Button variant

---

ErrorState

Props

Prop	Type	Default	Description
error	Error | null	-	Error object
title	string	i18n default	Error title
description	string	error.message	Error description
icon	LucideIcon	AlertCircle	Custom icon
onRetry	() => void	-	Retry callback
retryText	string	i18n default	Retry button text
size	'sm' | 'md' | 'lg'	'md'	Container size
variant	StateVariant	'error'	Icon variant
className	string	-	Container class

---

LoadingState

Props

Prop	Type	Default	Description
message	string	-	Loading message
size	'sm' | 'md' | 'lg'	'md'	Spinner size
className	string	-	Container class

---

SuccessState

Props

Prop	Type	Default	Description
title	string	-	Success title
description	string	-	Success message
icon	LucideIcon	CheckCircle	Custom icon
action	Action	-	Primary action
className	string	-	Container class

---

NotFoundState

Props

Prop	Type	Default	Description
title	string	-	Not found title
description	string	-	Description text
backLink	string	-	Back navigation URL
backLabel	string	-	Back button text
className	string	-	Container class

---

StateContainer

Centered container for state content.

Props

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg'	'md'	Container size
className	string	-	Additional class
children	ReactNode	-	Content

---

StateIcon

Icon with colored background.

Props

Prop	Type	Description
icon	LucideIcon	Icon component
variant	StateVariant	Color variant

StateVariant

type StateVariant = 'empty' | 'error' | 'success' | 'warning' | 'info'

See also

• State Components (Conceptual)