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.

import { IconButton } from 'reablocks';


export default function App() {
  return <IconButton>©</IconButton>
}

import { IconButton } from 'reablocks';

export default function App() {
  return <IconButton>©</IconButton>
}

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)

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.

Prop	Description	Default
`color`	Color variation of the button. `string`	`default`
`variant`	Style variant of the button. `string`	`filled`
`size`	The size variation of the button. `string`	`medium`
`fullWidth`	If true, the button will take up the full width of its container. `boolean`
`disableMargins`	If true, the margins of the button will be disabled. `boolean`
`disablePadding`	If true, the padding of the button will be disabled. `boolean`
`disableAnimation`	If true, the animation of the button will be disabled. `boolean`
`startAdornment`	Element to display before the Button content. `any`
`endAdornment`	Element to display after the Button content. `any`
`theme`	Theme for the Button. `ButtonTheme`
`ref`	The 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.

Command Palette Kbd