Docs
πŸ—οΈ ⏐ Components
Elements
Icon Button

IconButton

The IconButton component integrates icons within buttons, combining the visual appeal of icons with the functionality of buttons. This component is crucial for creating intuitive and space-efficient user interfaces, especially in applications requiring a clean and modern aesthetic.

Quick Start

To start using the IconButton component, import it from the reablocks library.

Examples

Basic Usage

Icon Buttons with Type Variations

The IconButton component integrates icons into buttons, providing various style variants like "filled", "outline", and "text". These options allow for versatile use across your UI, depending on the intended visual impact and user interaction:

Advanced Customization

Icon Buttons with Color Variations

IconButton supports different color schemes to signify various actions or statuses, enhancing the UX with visual cues. You can customize the background, icon color, and border to fit your application's design language.

Icon Buttons with Size Variations

Adjusting the size of IconButtons is straightforward, allowing them to fit seamlessly into different parts of your application, from toolbars to forms:

Theme Customization

Customize the IconButton's appearance with our default theme or your tailored version to ensure it complements your application's style. Here's the default theme structure:

  • root{}(9 keys)
      Show all

Learn more about how to customize in the Theme documentation.

API

Each property of the IconButton is detailed below, providing insight into how to fully utilize the component's capabilities.

PropDescriptionDefault
colorColor variation of the button.
string
default
variantStyle variant of the button.
string
filled
sizeThe size variation of the button.
string
medium
fullWidthIf true, the button will take up the full width of its container.
boolean
disableMarginsIf true, the margins of the button will be disabled.
boolean
disablePaddingIf true, the padding of the button will be disabled.
boolean
disableAnimationIf true, the animation of the button will be disabled.
boolean
startAdornmentElement to display before the Button content.
any
endAdornmentElement to display after the Button content.
any
themeTheme for the Button.
ButtonTheme
refThe ref to the button element.
LegacyRef<HTMLButtonElement>

Design and Usability Tips

  • Accessibility Considerations: Ensure that IconButtons are accessible by providing appropriate aria-labels for screen readers. Icons might convey meaning visually, but without proper labels, they can be meaningless or confusing to visually impaired users.

  • Spacing and Sizing for Touch: Consider the touch target size, especially for touch-screen device users. Ensure IconButtons are large enough to be easily tapped without accidentally activating neighboring elements. The recommended minimum touch target size is 48x48 pixels.