IconButton

The IconButton component is a versatile button that allows you to combine an icon with a text label. It is designed for use in situations where you want to display an icon along with some text in a single clickable element.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <IconButton
      buttonText="IconButton"
      altText="Icon button alt text"
      padded
      icon="https://superset.apache.org/img/superset-logo-horiz.svg"
    />
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
buttonText	string	"IconButton"	The text inside the button.
altText	string	"Icon button alt text"	The alt text for the button. If not provided, the button text is used as the alt text by default.
padded	boolean	true	Add padding between icon and button text.
icon	string	"https://superset.apache.org/img/superset-logo-horiz.svg"	Icon inside the button (URL or path).

Import

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

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.