Empty State

Basic empty state example demonstrating core behavior.

Package: @solidiom/empty-state
Version: 0.0.1-next.0
Status: stable

Examples

import * as EmptyState from "@solidiom/empty-state"

;<EmptyState.Root>
  <EmptyState.Icon>📭</EmptyState.Icon>
  <EmptyState.Title>No messages</EmptyState.Title>
  <EmptyState.Description>
    You don't have any messages yet. Send one to get started.
  </EmptyState.Description>
  <EmptyState.Action>
    <button>Send a message</button>
  </EmptyState.Action>
</EmptyState.Root>

The empty state provides a structured placeholder for void content areas. Each part is purely presentational with no built-in interactivity beyond the action slot.

No results found

Try adjusting your search or filter to find what you're looking for.

View source

        export function Root(props: EmptyStateRootProps) {
  return (
    <div
      role="status"
      class={props.class}
      style={props.style}
      {...applySemanticAttrs({ scope: "empty-state", part: "root" })}
    >
      {props.children}
    </div>
  )
}