空状態

hc-empty は中央寄せの空状態ブロックです: メディアスロット(アイコンまたはイラスト)、タイトル、説明、任意のアクション。「結果なし」、「まだ何もない」、初回起動の状態に使います。トークン駆動の間隔、 JavaScript なし — そして htmx の「結果なし」パーシャルスワップと自然に組み合います。

別名: 空状態、エンプティステート、データなし表示。

基本の HTML

No results

We couldn’t find anything matching your search. Try a different term or clear the filters.

<div class="hc-empty">
  <div class="hc-empty__media" aria-hidden="true">
    <!-- an icon, emoji, or <svg> illustration -->
    📭
  </div>
  <p class="hc-empty__title">No results</p>
  <p class="hc-empty__description">
    We couldn't find anything matching your search.
  </p>
  <div class="hc-empty__actions">
    <button class="hc-button" data-variant="primary" type="button">Clear filters</button>
    <button class="hc-button" type="button">Browse all</button>
  </div>
</div>

構造

パーツ	必須	用途
`hc-empty__media`	任意	アイコン / イラストのスロット。
`hc-empty__title`	はい	短い見出し。
`hc-empty__description`	任意	1〜2 文の案内。
`hc-empty__actions`	任意	1 つ以上の回復アクション。

メディアスロットは正方形(--hc-empty-media-size)で、中のインライン <svg> や <img> はボックスを満たします。説明は幅が制限され (--hc-empty-description-max-width)、長い文言も読みやすいままです。

htmx での利用

リストのエンドポイントに、行かこの空ブロックのどちらかをパーシャルとして返させます。空状態のスワップインが読み上げられるよう、ターゲットを aria-live 領域で包んでください。

<div id="results" aria-live="polite"
     data-hx-get="/search?q=widgets"
     data-hx-trigger="load">
  <!-- The server returns the results list, or, when there are none: -->
  <div class="hc-empty">
    <div class="hc-empty__media" aria-hidden="true">🔍</div>
    <p class="hc-empty__title">No matches for "widgets"</p>
    <p class="hc-empty__description">Check the spelling or try a broader term.</p>
    <div class="hc-empty__actions">
      <a class="hc-button" href="/search" data-hx-get="/search" data-hx-target="#results">Reset search</a>
    </div>
  </div>
</div>

挙動は htmx に留まります — hc-empty は「結果なし」レスポンスの見た目にすぎません。

アクセシビリティ

role は文脈に合うよう作者に委ねられています。ページの静的な領域としてなら role は不要です。ユーザー入力の結果として htmx がスワップインするときは、(上のように)ターゲットかブロックを aria-live="polite" で包み、新しい状態が読み上げられるようにしてください。
装飾のメディアグリフ / イラストには aria-hidden="true" を設定して読み上げから外してください — 意味はタイトルが運びます。
空状態がセクションを担うときは、ページのアウトラインに合う見出しレベルを選んでください: <p> の代わりに <h2 class="hc-empty__title"> など。クラスはどちらの要素もスタイルします。
回復アクションのラベルは具体的に(「フィルタをクリア」「最初のアイテムを追加」)。素の「OK」は避けてください。

テーマ用トークン

トークンパス	用途
`empty.padding`	ブロックのパディング。
`empty.media-size`	メディアスロットのサイズ + グリフサイズ。
`empty.media-fg`	メディア(アイコン)の色。
`empty.media-margin`	メディアの下のギャップ。
`empty.title-font-size` / `-font-weight` / `-fg`	タイトルの文字。
`empty.description-font-size` / `-fg`	説明の文字。
`empty.description-max-width`	説明の行長の上限。
`empty.description-margin`	タイトルの下のギャップ。
`empty.actions-margin`	アクションの上のギャップ。

CSS 変数

生成される CSS 変数を表示

--hc-empty-padding
--hc-empty-media-size | -media-fg | -media-margin
--hc-empty-title-font-size | -title-font-weight | -title-fg
--hc-empty-description-font-size | -description-fg
--hc-empty-description-max-width | -description-margin
--hc-empty-actions-margin

空状態

基本の HTML

構造

htmx での利用

アクセシビリティ

テーマ用トークン

CSS 変数

関連