Icon buttons are controls that let users take action, make choices, and move forward.
<IconButton icon={<IconPlusOutline18 />} />The IconButton comes with four variants: primary (default), accent, secondary, and ghost.
<IconButton icon={<IconPlusOutline18 />} variant="primary" /><IconButton icon={<IconPlusOutline18 />} variant="accent" /><IconButton icon={<IconPlusOutline18 />} variant="secondary" /><IconButton icon={<IconPlusOutline18 />} variant="ghost" />The IconButton comes with 5 sizes: 32, 36, 40 (default), 44, and 48.
<IconButton icon={<IconPlusOutline18 />} size={32} /><IconButton icon={<IconPlusOutline18 />} size={36} /><IconButton icon={<IconPlusOutline18 />} size={40} /><IconButton icon={<IconPlusOutline18 />} size={44} /><IconButton icon={<IconPlusOutline18 />} size={48} /><IconButton icon={<IconPlusOutline18 />} />Use the disabled prop to prevent a button from being interacted with. Disabled buttons communicate that an action is currently unavailable.
<IconButton disabled icon={<IconPlusOutline18 />} variant="primary" /><IconButton disabled icon={<IconPlusOutline18 />} variant="accent" /><IconButton disabled icon={<IconPlusOutline18 />} variant="secondary" /><IconButton disabled icon={<IconPlusOutline18 />} variant="ghost" />Use the loading prop to indicate that an action is in progress. While loading, the button shows a spinner and cannot be interacted with.
Do not add disabled when using loading, as the button is automatically non-interactive while loading.
<IconButton icon={<IconPlusOutline18 />} loading variant="primary" /><IconButton icon={<IconPlusOutline18 />} loading variant="accent" /><IconButton icon={<IconPlusOutline18 />} loading variant="secondary" /><IconButton icon={<IconPlusOutline18 />} loading variant="ghost" />Use the rounded prop to give the button fully rounded corners.
<IconButton icon={<IconPlusOutline18 />} rounded variant="primary" /><IconButton icon={<IconPlusOutline18 />} rounded variant="accent" /><IconButton icon={<IconPlusOutline18 />} rounded variant="secondary" /><IconButton icon={<IconPlusOutline18 />} rounded variant="ghost" />Use the IconButton component to create a button that only shows an icon.
<IconButton icon={<IconPlusOutline18 />} variant="primary" /><IconButton icon={<IconPlusOutline18 />} variant="accent" /><IconButton icon={<IconPlusOutline18 />} variant="secondary" /><IconButton icon={<IconPlusOutline18 />} variant="ghost" />