Skip to content

@agala-labs/ui

Empty State

Explains an empty collection and offers the next useful action.

Examples

Default

No projects

Create your first project to start organizing work.

No matching records

No results match this unusually-specific-operational-filter-value-that-must-wrap-inside-a-narrow-panel.

<AgalaEmptyState size="compact" title="No results" description="Try another filter."><template #action><AgalaButton size="sm" variant="ghost">Clear filters</AgalaButton></template></AgalaEmptyState>

Import

import { AgalaEmptyState } from '@agala-labs/ui'

API

PropTypeDefaultDescription
titlestringRequired state title.
descriptionstringSupporting explanation.
size'default' | 'compact''default'Presentation density.
classstringConsumer override class.

Slots

  • icon
  • action

Accessibility

Keep the title explicit and ensure the action is reachable in normal reading order.

Released under the MIT License.