Danger Button

危険な操作（削除、破棄など）を行うためのボタンコンポーネントです。ユーザーに注意を促すために、通常のボタンとは異なる赤系の色で表示されます。

基本

<CheDangerButton>削除</CheDangerButton>

バリアント

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

<CheDangerButton variant="primary">削除</CheDangerButton>
<CheDangerButton variant="secondary">削除</CheDangerButton>
<CheDangerButton variant="tertiary">削除</CheDangerButton>
<CheDangerButton variant="quaternary">削除</CheDangerButton>

• primary: 背景が赤色の最も強調されたスタイル。主要な削除アクションに使用
• secondary: 赤い枠線のみのスタイル。やや控えめな削除アクションに使用
• tertiary: 薄い赤背景のスタイル。さらに控えめな削除アクションに使用
• quaternary: 下線付きテキストのみのスタイル。最も控えめな削除アクションに使用

サイズ

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

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

無効状態

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

<CheDangerButton variant="primary" disabled>削除</CheDangerButton>
<CheDangerButton variant="secondary" disabled>削除</CheDangerButton>
<CheDangerButton variant="tertiary" disabled>削除</CheDangerButton>
<CheDangerButton variant="quaternary" disabled>削除</CheDangerButton>

Prefix / Suffix

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

Prefix

<CheDangerButton
  iconOptions={{ position: "prefix", name: "delete", size: 4.5 }}
>
  削除
</CheDangerButton>

Suffix

<CheDangerButton
  iconOptions={{ position: "suffix", name: "arrow-right", size: 4.5 }}
>
  続ける
</CheDangerButton>

div要素として使用

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

<a href="/path">
  <CheDangerButton as="div">アカウントを削除</CheDangerButton>
</a>

すべてのバリエーション

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

Props