MUIの勉強記録 2 ~Buttonコンポーネント~

Buttonコンポーネント

公式の説明を読みながら解読します。

基本ボタンには、テキスト、包含、アウトラインの3つのバリエーションがあります。

引用元:MUI公式サイト_Button

variant

variant属性には"text","contained","outlined"がある。

• "text"と指定すると、タグでくくって指定した文字がボタンになる。何も指定しない場合、デフォルトで"text"になる。
• "contained"と指定するとボタン全体が青色になる。(青色はデフォルトの場合。変更可能)
• "outlined"と指定するとボタンの外枠のみが青色になる。

クリックの処理

ボタンタグの中にonClick関数を置きます。

color

既定のボタンを使用することができます。例えば"secondary","success","error"などがあります。また、カスタムをすることもできます。

使いかた

   color="secoundary"

size

ボタンのサイズを変更します。

• small
• medium
• large

使いかた

    size="small"
    size="medium"
    size="large"