コンポーネント工房：Reflexライブラリ100
·
講座の概要
レイアウト
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
タイポグラフィ
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
フォーム
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
データ表示
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
開閉と切り替え
·
Tabs
·
Accordion
·
Segmented Control
オーバーレイ
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
動的レンダリング
·
Cond
·
Match
·
Foreach
·
Auto Scroll
メディア
·
Image
·
Audio
·
Video
表とデータグリッド
·
Table
·
Data Table
·
Data Editor
チャート
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
チャートの部品
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
ほかのチャートライブラリ
·
Plotly
·
Pyplot
HTML要素
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
そのほかの道具
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
工房の注文書
決済画面に、目立つ「購入」ボタンを1つと、控えめな「キャンセル」ボタンを1つ作ってください。
rx.button は、押すと何かが起きる場所です。保存、送信、次のステップ、ダイアログを開くなど、ユーザーが「実行」するあらゆる場所で使います。文字を渡すと、そのままボタンの中に入ります。
rx.button("Save")ボタンの見た目は、ほとんど5つのプロパティで決まります。下の実習台で値を変えると、ボタンとコードが一緒に変わります。
プロパティを変えてみる
label
variant
size
color
radius
high_contrast
loading
disabled
rx.button("Buy now", variant="solid", size="2", color_scheme="indigo", radius="medium", high_contrast=False, loading=False, disabled=False)| プロパティ | 値 | 既定値 | 用途 |
|---|---|---|---|
variant | "classic" "solid" "soft" "surface" "outline" "ghost" | "solid" | 強調の度合い。画面の主な操作はsolid、補助的な操作はsoft・outline・ghost |
size | "1" ~ "4" | "2" | 高さと文字の大きさ |
color_scheme | Radixの色名（"indigo", "red" …） | テーマの色 | 意味のある色。削除はred、成功はgreenのように |
radius | "none" "small" "medium" "large" "full" | テーマの値 | 角の丸み |
high_contrast | True / False | False | 背景とのコントラストを強くする |
loading | True / False | False | スピナーを表示し、押せなくする |
disabled | True / False | False | 押せなくする |
強調の強いものから弱いものへの順です。1つの画面で強いvariantを主な操作1つだけに使えば、ユーザーは何を押せばよいかすぐにわかります。
rx.flex(
rx.button("classic", variant="classic"),
rx.button("solid", variant="solid"),
rx.button("soft", variant="soft"),
rx.button("surface", variant="surface"),
rx.button("outline", variant="outline"),
rx.button("ghost", variant="ghost"),
spacing="3",
wrap="wrap",
)子として rx.icon を入れると、文字の横にアイコンがつきます。アイコンだけのボタンには rx.icon_button を使い、スクリーンリーダーのために aria_label で名前をつけます。
rx.flex(
rx.button(rx.icon("download"), "Download"),
rx.button("Next", rx.icon("arrow-right"), variant="soft"),
rx.icon_button(rx.icon("heart"), variant="outline", aria_label="Like"),
spacing="3",
align="center",
)ボタンの要は on_click です。Stateのイベントハンドラーをつなぐと、押すたびにサーバー側の値が変わり、画面もそれに合わせて変わります。文字とStateの値を混ぜて子として渡すこともできます。
class ButtonCountState(rx.State):
count: int = 0
@rx.event
def increment(self):
self.count += 1
@rx.event
def reset_count(self):
self.count = 0
rx.flex(
rx.button("Clicked ", ButtonCountState.count, " times", on_click=ButtonCountState.increment),
rx.button("Reset", on_click=ButtonCountState.reset_count, variant="soft", color_scheme="gray"),
spacing="3",
)主な操作である「購入」はsolid、取り消しの「キャンセル」はsoftとグレーで控えめにします。
rx.flex(
rx.button("Cancel", variant="soft", color_scheme="gray"),
rx.button(rx.icon("shopping-cart"), "Buy now"),
spacing="3",
justify="end",
)工房ノート
rx.button("文字")で作り、on_clickにイベントハンドラーをつなぐ。
variant: classic · solid · soft · surface · outline · ghost。強くするのは主な操作1つだけ。
sizeは"1"~"4"、color_schemeは意味のある色、loading・disabledで押せなくする。
アイコンは子としてrx.icon、アイコンだけのボタンはrx.icon_button + aria_label。
フォームの送信ボタンとして使うならtype="submit"（Formのページで扱う）。
新しい授業・講座のお知らせを受け取る
この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。
R
ReflexKR
触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。
ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する
アフィリエイトと支援について© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
質問と回答
この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。