Radixホームページ
WorkOS製
Radixホームページ
WorkOS製
テーマテーマプリミティブプリミティブアイコンアイコンカラーカラー
ドキュメントPlaygroundブログ

概要

はじめに
スタイル設定
レイアウト
リリース

テーマ

概要
カラー
ダークモード
タイポグラフィ
スペーシング
ブレークポイント
角丸
シャドウ
カーソル

レイアウト

Box
Flex
Grid
Container
Section

タイポグラフィ

テキスト
見出し
引用
コード
Em
Kbd
リンク
引用
強調

コンポーネント

アラートダイアログ
アスペクト比
アバター
バッジ
ボタン
コールアウト
カード
チェックボックス
チェックボックスグループ
チェックボックスカード
コンテキストメニュー
データリスト
ダイアログ
ドロップダウンメニュー
ホバーカード
アイコンボタン
Inset
Popover
プログレス
ラジオボタン
ラジオグループ
ラジオカード
スクロールエリア
セグメントコントロール
セレクト
セパレーター
スケルトン
スライダー
スピナー
スイッチ
テーブル
タブ
タブナビゲーション
テキストエリア
テキストフィールド
ツールチップ

ユーティリティ

アクセシブルアイコン
ポータル
リセット
スロット
テーマ
視覚的に非表示
コンポーネント

ボタン

フォームの送信やダイアログの表示など、アクションやイベントをトリガーします。

ソースコードを見る問題を報告Playgroundで確認
<Button>

  <BookmarkIcon /> Bookmark

</Button>

APIリファレンス

このコンポーネントはbutton要素に基づいており、共通のマージンプロパティをサポートしています。

プロパティ型デフォルト値
asChild
boolean
デフォルト値なし
size
Responsive<"1" | "2" | "3" | "4">
"2"
variant
enum
"solid"
color
enum
デフォルト値なし
highContrast
boolean
デフォルト値なし
radius
"none" | "small" | "medium" | "large" | "full"
デフォルト値なし
loading
boolean
false

例

サイズ

sizeプロパティを使用して、ボタンのサイズを制御します。

<Flex gap="3" align="center">

  <Button size="1" variant="soft">

    Edit profile

  </Button>

  <Button size="2" variant="soft">

    Edit profile

  </Button>

  <Button size="3" variant="soft">

    Edit profile

  </Button>

</Flex>

バリアント

variantプロパティを使用して、ボタンの視覚的なスタイルを制御します。

<Flex align="center" gap="3">

  <Button variant="classic">Edit profile</Button>

  <Button variant="solid">Edit profile</Button>

  <Button variant="soft">Edit profile</Button>

  <Button variant="surface">Edit profile</Button>

  <Button variant="outline">Edit profile</Button>

</Flex>

ゴースト

ghostバリアントを使用して、装飾のないボタンを表示します。ゴーストボタンはレイアウトではテキストのように動作し、アクティブ状態とホバー状態のパディングを維持しながら、ネガティブマージンを使用して隣接する要素と視覚的に揃えます。

<Button variant="ghost">Edit profile</Button>

色

colorプロパティを使用して、特定の色を割り当てます。

<Flex gap="3">

  <Button color="indigo" variant="soft">

    Edit profile

  </Button>

  <Button color="cyan" variant="soft">

    Edit profile

  </Button>

  <Button color="orange" variant="soft">

    Edit profile

  </Button>

  <Button color="crimson" variant="soft">

    Edit profile

  </Button>

</Flex>

高コントラスト

highContrastプロパティを使用して、背景との色のコントラストを向上させます。

<Flex direction="column" gap="3">

  <Flex gap="3">

    <Button color="gray" variant="classic">

      Edit profile

    </Button>

    <Button color="gray" variant="solid">

      Edit profile

    </Button>

    <Button color="gray" variant="soft">

      Edit profile

    </Button>

    <Button color="gray" variant="surface">

      Edit profile

    </Button>

    <Button color="gray" variant="outline">

      Edit profile

    </Button>

  </Flex>

  <Flex gap="3">

    <Button color="gray" variant="classic" highContrast>

      Edit profile

    </Button>

    <Button color="gray" variant="solid" highContrast>

      Edit profile

    </Button>

    <Button color="gray" variant="soft" highContrast>

      Edit profile

    </Button>

    <Button color="gray" variant="surface" highContrast>

      Edit profile

    </Button>

    <Button color="gray" variant="outline" highContrast>

      Edit profile

    </Button>

  </Flex>

</Flex>

角丸

radiusプロパティを使用して、特定の角丸値を割り当てます。

<Flex gap="3">

  <Button radius="none" variant="soft">

    Edit profile

  </Button>

  <Button radius="large" variant="soft">

    Edit profile

  </Button>

  <Button radius="full" variant="soft">

    Edit profile

  </Button>

</Flex>

アイコン付き

アイコンをボタンの中に直接入れ子にすることができます。適切な間隔は自動的に提供されます。

<Flex gap="3">

  <Button variant="classic">

    <BookmarkIcon /> Bookmark

  </Button>

  <Button variant="solid">

    <BookmarkIcon /> Bookmark

  </Button>

  <Button variant="soft">

    <BookmarkIcon /> Bookmark

  </Button>

  <Button variant="surface">

    <BookmarkIcon /> Bookmark

  </Button>

  <Button variant="outline">

    <BookmarkIcon /> Bookmark

  </Button>

</Flex>

ローディング

loadingプロパティを使用して、ボタンの内容の代わりにローディングスピナーを表示します。ボタンの元のサイズは通常の状態で維持されます。ローディング中はボタンは無効になります。

<Flex gap="3">

  <Button loading variant="classic">

    Bookmark

  </Button>

  <Button loading variant="solid">

    Bookmark

  </Button>

  <Button loading variant="soft">

    Bookmark

  </Button>

  <Button loading variant="surface">

    Bookmark

  </Button>

  <Button loading variant="outline">

    Bookmark

  </Button>

</Flex>

ボタンの中にアイコンがある場合、ボタンのdisabled状態を使用し、アイコンをスタンドアロンのSpinnerでラップすることで、より洗練されたデザインを実現できます。

<Flex gap="3">

  <Button disabled variant="classic">

    <Spinner loading>

      <BookmarkIcon />

    </Spinner>

    Bookmark

  </Button>

  <Button disabled variant="solid">

    <Spinner loading>

      <BookmarkIcon />

    </Spinner>

    Bookmark

  </Button>

  <Button disabled variant="soft">

    <Spinner loading>

      <BookmarkIcon />

    </Spinner>

    Bookmark

  </Button>

  <Button disabled variant="surface">

    <Spinner loading>

      <BookmarkIcon />

    </Spinner>

    Bookmark

  </Button>

  <Button disabled variant="outline">

    <Spinner loading>

      <BookmarkIcon />

    </Spinner>

    Bookmark

  </Button>

</Flex>
前へバッジ
次へコールアウト
GitHubでこのページを編集。