Button

主に削除ダイアログで使用します。具体的な使用方法は、取り返しのつかない操作ボタンの提供方法を参照してください。
すべてのユーザーが色を見たり、理解できるわけではありません。警告を促す赤色（DANGER）に頼らず、ボタン配置のコンテキストやラベルテキストだけでもユーザーに伝わるように検討してください。

Textボタンは、画面内の通常の操作をユーザーに示す役割を持ちます。 Secondaryボタンと役割は同じですが、ほかのコンポーネントにボタンが内包される場合や、レイアウト上の不都合がある場合など、Secondaryボタンが使いづらいときにTextボタンの使用を検討します。

例えばドロップダウンメニュー内のボタンやアイコンボタンなど、ボタンとしての装飾（背景色や枠線）を省いてもボタンとして認識できる場合に使用できます。
Textボタンを単独で使用する場合は、ラベルテキストだけではボタンとして認識しづらいので、プレフィックス（prefixprops）にアイコンを設定して使用します。
ほかの画面に移動させることが主目的の場合は、TextLinkを使用してください。

AnchorButtonは、リンク（a要素）をボタンのように装飾にするコンポーネントです。アクションボタンとして表現したい場合は、Buttonを使用してください。

レイアウト

ボタンサイズやアイコンの有無で、コンポーネント内のレイアウトにバリエーションがあります。「サイズ小かつアイコン付き（左）」のように組み合わせることもできます。

2種類の大きさのボタンを使用できます。
SmartHR UIでは、サイズ（sizeprops）で指定できます。

種類	表示例	説明
`通常`		通常のサイズです。
`小`		レイアウトの都合上、スペースを節約したいときに使うサイズです。

アイコンは、ボタンを押して実行される操作やUIを想起させる役割や、ボタンに視覚的なアクセントを与える役割を持ちます。

ラベルテキストの左右にアイコンを配置できます。
SmartHR UIでは、アイコン付き（左）はプレフィックス（prefixprops）に、アイコン付き（右）はサフィックス（suffixprops）にIconを指定することで表現できます。

アイコン付き（左）とアイコン付き（右）の例と役割は以下の表を参考にしてください。

種類	表示例	アイコンの役割
`アイコン付き（左）`		ボタンを押したときに実行される操作を想起させるために使用します。同じ操作のボタンには、同じアイコンを指定してください。
`アイコン付き（右）`		ドロップダウンのように、ボタンを押したときに特定のUIが表示される場合に使用します。（例：DropdownMenuButton、FilterDropdown、SortDropdown）

アイコンを設定する判断は、以下を参考にしてください。

アイコンは左右どちらかにのみ指定してください。どちらにもアイコンをつけられそうな場合は、アイコン付き（右）（サフィックス）を優先し、アイコン付き（左）（プレフィックス）には指定しないでください。
例外として、FilterDropdownやSortDropdownのように、「操作を想起させる役割」と「特定のUIを表す役割」の両方をアイコンが担う必要があるときは、アイコン付き（右）（サフィックス）に「操作を想起させるアイコン」を指定する場合もあります。

プレフィックスにアイコンを設定する判断は、以下を参考にしてください。

SmartHR上で頻出する操作に関しては、アイコンをつけることを推奨します。
レイアウトの都合でボタンの存在感を強調したい場合や、隣接するアイコン付きボタンと見た目を揃えたい場合など、必要性があればアイコンをつけることが可能です。
一方で明確な必要性や理由がなければ、アイコンをつけることは極力避けてください。アイコンが多すぎると、ユーザーがアイコンの意味を理解することが難しくなり、開発者としてもアイコンを作成・選定するコストがかかります。