SearchApi Design System

Components

      • Playground
      • All variants
      • States
      • Full width
      • Playground
      • Variants
    • Locale Switcher
    • Site Footer
      • Playground
      • Every preference
      • Playground
      • Every preference
      • HTTP request
      • Every token kind
      • Playground
      • Every target
      • Playground
      • Slots
      • Sunk body
      • Plan comparison
      • Numeric columns
      • Parameter reference
      • Payload
      • With drill-in tokens
      • An error envelope
      • All meanings
      • Playground
      • Every service
      • Playground
      • Lettermark
      • Playground
      • Named and decorative
      • Default
      • In a value list
      • Playground
      • Playground
      • In a row
      • Playground
      • Default
      • With type
      • Required
      • In context
      • Current
      • Sizes
      • States
      • Composed
      • Playground
      • Playground
      • Multiline
      • Playground
      • Required, default and set rows
      • With a validation error
      • With a handed-in token
      • Playground
      • Requiredness
      • Defaults and enums
    • Playground
      • Playground
      • With parameters set
      • No recording, Run disabled
      • Playground
      • Handed in from another engine
      • With a validation error
      • Playground
      • Multiple
      • Closed
      • Results view
      • Sidebar
      • Panel
      • Lettermark services
      • Playground
      • Renders nothing
      • Playground
      • Variants
      • Export switcher
    • Engine Page Header

No matching results.

Pages

  • Foundations
  • Colour
  • Typography
  • Radius & shadow
  • Motion
  • Data states
  • Parameter vocabulary
  • Form controls

No matching results.

Data states

Data states

Seven states the playground's run frame can be in. They are listed here rather than previewed, and that is a statement about where they live: each one is a partial under app/views/playgrounds/states/ that reads controller state (@api, @sample, @run_state), so a preview of one would have to invent that state and would then be asserting a screen the controller never produces. test/integration/ drives them through the real request instead.

What is previewable is everything they are built from — PanelComponent, JsonLinesComponent, BadgeComponent, PagerComponent — and those are under Components.

State Partial What it means
empty _empty Nothing has been run yet.
loading _loading The run in flight. Server-rendered on every response and revealed by CSS when Turbo marks the frame busy — no controller manages it.
result _result A request that returned blocks. Raw stays reachable beside them.
empty_result _empty_result A valid request that matched nothing. Distinct from empty: collapsing the two tells a reader their search was broken when it was merely unlucky.
validation_error _validation_error The form refused before any request was made.
auth_error _error The API's error envelope as it was recorded, wearing the :required meaning.
quota_error _error The same envelope with the other recording, wearing :quota. One partial for both, because two would be two chances to describe the same envelope differently.

Reaching them

Both error states are reached through the demo-key presets rather than through a "simulate an error" switch, which keeps the demonstration diegetic: the reader does what a real caller does — sends a bad key — and reads what the API would actually return.

Every run resolves a recorded fixture from disk, so all seven states render with no network access at all. See web/data/sample_responses/README.md.

Motion Parameter vocabulary