Button
実行と移動を、結果の違いから選びます。 仕様を読む · 派生参照ビューを読む
FallbackContinuous
Fallback · round
Token · superellipse(2)
Liberka Components
Liberka共通の単体UI部品を、目的、variant、stateから探せる参照実例です。 左のカテゴリと検索から、名前を知らない項目も目的で探せます。全製品で共通の見本を表示します。
Actions
実行と移動を、結果の違いから選びます。
Link
実行と移動を、結果の違いから選びます。 仕様を読む · 派生参照ビューを読む
default
hover
focus
current
Toggle Group
実行と移動を、結果の違いから選びます。 仕様を読む · 派生参照ビューを読む
default
hover
focus
selected
disabled
Forms & Input
入力、選択、検証を一つの流れとして確認します。
Text Field
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
default
focus
disabled
read-only
error
success
Search Field
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
default
focus
disabled
Checkbox
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
unchecked
checked
mixed
focus
disabled
error
Radio Group
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
default
selected
focus
disabled
error
Select
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
チーム
closed
open
focus
selected
disabled
error
Combobox / Autocomplete
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
idle
open
loading
selected
empty
error
Switch
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
週次まとめオフ
off
on
focus
disabled
Slider
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
default
focus
active
disabled
Number Field
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
default
focus
disabled
error
Date Field / Date Picker
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
2026年10月
default
focus
open
selected
error
Password Field
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
hidden
visible
focus
error
File Upload
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
PDF、10 MBまで。まだ選択されていません。
empty
selected
uploading
success
error
Character Count
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
within-limit
near-limit
over-limit
Chat Composer
入力、選択、検証を一つの流れとして確認します。 仕様を読む · 派生参照ビューを読む
メッセージを入力してください。
empty
ready
sending
failed
over-limit
Feedback
状態、影響、次の行動を伝えます。
Label
状態、影響、次の行動を伝えます。 仕様を読む · 派生参照ビューを読む
neutral
success
warning
danger
Alert / Notification Banner
状態、影響、次の行動を伝えます。 仕様を読む · 派生参照ビューを読む
公開前の下書きです
この内容はチーム内だけに保存されています。
information
success
warning
error
Toast
状態、影響、次の行動を伝えます。 仕様を読む · 派生参照ビューを読む
リンクをコピーしました。
entering
visible
dismissed
Error Summary
状態、影響、次の行動を伝えます。 仕様を読む · 派生参照ビューを読む
入力を確認してください
hidden
visible
focused
Progress / Spinner
状態、影響、次の行動を伝えます。 仕様を読む · 派生参照ビューを読む
資料を生成しています（3 / 5）
pending
running
paused
success
error
Content & Data
内容と関係を、意味に合う構造で表します。
Card
内容と関係を、意味に合う構造で表します。 仕様を読む · 派生参照ビューを読む
今週の記録
通常の円弧を安全なfallbackとして保ちます。
今週の記録
対応Browserでは同じ半径に連続曲率を適用します。
Fallback · round
Token · superellipse(2)
default
Avatar
内容と関係を、意味に合う構造で表します。 仕様を読む · 派生参照ビューを読む
山田 花子
デザイナー
image
fallback
Separator
内容と関係を、意味に合う構造で表します。 仕様を読む · 派生参照ビューを読む
概要
現在の状況です。
次の行動
確認する内容です。
decorative
semantic
List / Table
内容と関係を、意味に合う構造で表します。 仕様を読む · 派生参照ビューを読む
| 状態 | |
|---|---|
| 山田 花子 | 確認済み |
| 佐藤 健 | 確認待ち |
default
selected
loading
empty
error
Calendar / Agenda
内容と関係を、意味に合う構造で表します。 仕様を読む · 派生参照ビューを読む
2026年8月
default
selected
loading
empty
error
Mini Calendar
内容と関係を、意味に合う構造で表します。 仕様を読む · 派生参照ビューを読む
2026年9月
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
|---|---|---|---|---|---|---|
日付：予定あり ・：予定なし
default
empty
loading
error
Tree
内容と関係を、意味に合う構造で表します。 仕様を読む · 派生参照ビューを読む
計画書
報告書
collapsed
expanded
selected
focus
disabled
loading
Overlays
起点、背後操作、Focusの扱いから選びます。
Dialog
起点、背後操作、Focusの扱いから選びます。 仕様を読む · 派生参照ビューを読む
opening
open
submitting
error
closing
Popover / Menu / Tooltip
起点、背後操作、Focusの扱いから選びます。 仕様を読む · 派生参照ビューを読む
closed
open
focus
disabled
Communication
発話者、責任、送信状態を区別します。
Chat Bubble
発話者、責任、送信状態を区別します。 仕様を読む · 派生参照ビューを読む
まず、期限が決まっている仕事を確認しましょう。
今日中の仕事から確認します。
今日中の仕事から確認します。
sending
streaming
sent
failed
Chat Message
発話者、責任、送信状態を区別します。 仕様を読む · 派生参照ビューを読む
今日中の仕事から確認します。
sending
streaming
sent
failed
Message Log
発話者、責任、送信状態を区別します。 仕様を読む · 派生参照ビューを読む
今日取り組んだ教科を教えてください。
数学の一次関数を復習しました。