Gutenberg IconButton コンポーネント和訳

このページは Gutenberg の IconButton コンポーネントのリファレンス 2019年1月15日版を和訳したものです。

IconButton

アイコンボタンは、ユーザーが実行できるアクションを表し、インターフェイスとの対話方法を提供します。特に以下のような場所でよく出てきます:

• ボタングループ
• ツールバー

目次

1. デザインガイドライン
2. 開発ガイドライン
3. 関連コンポーネント

デザインガイドライン

ベストプラクティス

アイコンボタンは以下のようにすること:

• アクションを示す明瞭で正確なアイコンを選ぶこと。
• クリックやタップによるアクションの始動を明確に伝えること。
• 枯れた色を適切に用いること。 例えば、赤ボタンはアンドゥが困難、もしくは不可能である場合のみに使うこと。
• インタフェースにおいて一貫した配置を行うこと。

解説

アイコンボタンはそれほど強調されません。ページ上ではあまり目立たないため、重要度の低いアクションに使用します。重要の度合いはコンテキストによって異なるでしょうが、通常は、誰かに実行してもらいたいメインのアクションに対する補足的な位置付けです。アイコンボタンは、コンテンツから注意をそらしたくない場合にも役立ちます。

開発ガイドライン

使い方

import { IconButton } from '@wordpress/components';

const MyIconButton = () => (
    <IconButton
        icon="ellipsis"
        label="More"
    />
);

関連コンポーネント

• Toolbar コンポーネントは IconButton コンポーネントで構成されています。