ボタン
押すと、ほんの少し縮んですぐに応えます。目で追うより先に、手で感じる反応です。矢印はホバーで少し前に出ます。無効なボタンはどちらもしません。
バリエーション
プロパティ
▾
コード
import { Button } from "@/components/ui/kit/ui";
<Button arrow>プライマリ</Button>すべての状態
まだ押されていません
通常
ホバー
フォーカス
押下中
無効
読み込み中
使い方
使っているトークン
| --ink | … |
|---|---|
| --paper | … |
| --spark | … |
| --spark-tint | … |
| --spark-deep | … |
| --line-2 | … |
| --surface | … |
| --muted | … |
| --font-label | … |
| --dur-instant | … |
| --ease-out | … |
値はスタイルシートからその場で読み込んでいるため、サイトの表示テーマに合わせて変わります。
仕様
- きっかけ
- 長さ
- --dur-instant 100ms
- イージング
- --ease-out cubic-bezier(0.16, 1, 0.3, 1)
- 動きを減らす設定