メインコンテンツへスキップ
Context Grammar文脈を読むAI

マイクボタン

システムで唯一のインラインSVGのグリフです。聞き取り中は枠とアイコンが spark の赤になって脈打つので、音が出なくても状態がわかります。

バリエーション

プロパティ

コード

import { MicButton } from "@/components/ui/kit/ui";

<MicButton onClick={toggleListening} />

すべての状態

通常

ホバー

フォーカス

押下中

無効

聞き取り中

使い方

こうする

  • 聞き取っている間だけ、聞き取っていることを示します。

こうしない

  • 押されないうちに聞き取りを始めない。

使っているトークン

使っているトークン
--ink…
--muted…
--line-2…
--spark…
--dur-instant…
--ease-out…

値はスタイルシートからその場で読み込んでいるため、サイトの表示テーマに合わせて変わります。