Button

ボタンコンポーネントです。ユーザーのアクションを受け付けるために使用します。

基本

<CheButton>ボタン</CheButton>

バリアント

variant でボタンのスタイルを指定できます。デフォルトは "primary" です。

<CheButton variant="primary">ボタン</CheButton>
<CheButton variant="secondary">ボタン</CheButton>
<CheButton variant="tertiary">ボタン</CheButton>

サイズ

height と width でボタンのサイズを指定できます。デフォルトは height="44" width="120" です。

<CheButton height="44" width="295">ボタン</CheButton>
<CheButton height="44" width="120">ボタン</CheButton>
<CheButton height="36" width="110">ボタン</CheButton>

無効状態

disabled でボタンを無効化できます。

<CheButton variant="primary" disabled>ボタン</CheButton>
<CheButton variant="secondary" disabled>ボタン</CheButton>
<CheButton variant="tertiary" disabled>ボタン</CheButton>

Prefix / Suffix

iconOptions でボタンテキストの前後にアイコンを配置できます。

Prefix

<CheButton iconOptions={{ position: "prefix", name: "search", size: 4.5 }}>
  検索
</CheButton>

Suffix

<CheButton iconOptions={{ position: "suffix", name: "arrow-right", size: 4.5 }}>
  次へ
</CheButton>

div要素として使用

as="div" を指定すると <div> 要素として描画されます。<a> タグで囲んでナビゲーション用途に使う場合に便利です。

お問い合わせはこちら

<a href="/path">
  <CheIconButton as="div" iconName="search" aria-label="検索" />
</a>

すべてのバリエーション

すべてのバリエーション一覧はカタログページを参照してください。

Props

属性	詳細	型	デフォルト	必須
children	ボタンテキスト	ReactNode	-	Yes
as	レンダリングする要素	”button” \| “div"	"button”	No
variant	ボタンスタイル	”primary” \| “secondary” \| “tertiary"	"primary”	No
height	ボタンの高さ	”44” \| “36"	"44”	No
width	ボタンの幅	”295” \| “120” \| “110”	`height`に応じて`"120"`または`"110"`	No
type	ボタンタイプ（as=“button” 時）	“button” \| “submit” \| “reset”	-	No
className	カスタムクラス	string	-	No
disabled	無効状態（as=“button” 時）	boolean	false	No
iconOptions	アイコン設定	IconOptions	-	No