Arterial Icon Button

Another React Material Icon Button

Installation

npm install @arterial/icon-button

Usage

Styles

Sass

@use "@material/icon-button/index.scss" as icon-button;
@include icon-button.core-styles;

CSS

import '@material/icon-button/dist/mdc.icon-button.css';

JSX

import {IconButton} from '@arterial/icon-button';

Regular Icon Button

<IconButton icon="favorite" />

Toggle Button

function Toggle() {
  const [on, setOn] = useState(false);
  return (
    <IconButton
      icon="favorite_border"
      iconOn="favorite"
      on={on}
      onClick={() => setOn(!on)}
    />
  );
}

Other Variants

Image

Icon buttons can be used with img tags.

<IconButton
  icon={
    <img
      src="https://instagram-brand.com/wp-content/uploads/2016/11/Instagram_AppIcon_Aug2017.png"
      alt="instagram"
    />
  }
/>

Toggle Image

Icon button toggles can be used with img tags.

function ToggleImage() {
  const [on, setOn] = useState(false);
  return (
    <IconButton
      icon={
        <img
          src="https://en.facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png"
          alt="facebook"
        />
      }
      iconOn={
        <img
          src="https://instagram-brand.com/wp-content/uploads/2016/11/Instagram_AppIcon_Aug2017.png"
          alt="instagram"
        />
      }
      on={on}
      onClick={() => setOn(!on)}
    />
  );
}

SVG

Icon buttons can be used with svgs.

<IconButton icon={<FirefoxSvg />} />

Toggle SVG

Icon button toggles can be used with svgs.

function ToggleSvg() {
  const [on, setOn] = useState(false);
  return (
    <IconButton
      icon={<ChromeSvg />}
      iconOn={<FirefoxSvg />}
      on={on}
      onClick={() => setOn(!on)}
    />
  );
}

Props

IconButton

| Name | Type | Description | | --------- | ---------------- | ------------------------------------------------------------------ | | className | string | Classes to be applied to the root element. | | icon | string | node | Icon to render within root element. Displays when toggle is "off". | | iconOn | string | node | Icon to render within root element. Displays when toggle is "on". | | label | string | Sets the aria-label on root element. | | on | boolean | Indicates the toggle is on. | | style | object | Styles to be applied to the root element. | | tag | string | object | HTML tag to be applied to the root element. Defaults to button. |