Icon Button

Icon buttons allow users to take actions, and make choices, with a single tap.

Refer to the Icons Library regarding the available icon options.

For buttons with both icons and text, use the Button component with leftEnhancer. For more information, see the Button docs.

Examples

Round

Square

Default

Disabled

Selected

xxxxs

xxxs

xxs

Round

Square

Default

Disabled

Selected

Name	Type	Default	Description
animate	boolean	false	Enable animation for certain parts of button. e.g. shows animated border on hover for ai intent
bordered	boolean	false	Adds border to button.
children	react node		Icon within the button.
disabled	boolean	false	Indicates that the button is disabled.
intent	'ai' \| 'error' \| 'default'		Defines the intent of button
isLoading	boolean	false	Show loading button style and spinner.
isSelected	boolean	false	Indicates that the button is selected.
onClick	function		Function called when button is clicked.
overrides	custom		Lets you customize all aspects of the component.
shape	'round' \| 'square'		Defines the shape of the button.
size	'xxxxs' \| 'xxxs' \| 'xxs' \| 'xs' \| 'sm' \| 'md'		Defines the size of the button. SPACIOUS \| COMFORTABLE -> md, COMPACT -> xxxs, DEFAULT -> md
tooltipContent	react node		The content of the tooltip. If provided, IconButton will be wrapped with StatefulTooltip.

You can check the implementation of the component for more details.

You can import this module like so:

import {IconButton} from 'spaceweb/button'

It exports the following components or utility functions: