ButtonIcon

Default button

Use the variant prop to change the visual aspect of the button.

peoplepeoplepeople

Show code

default.tsx

import { ButtonIcon } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

export function ButtonIconDefault() {
  return (
    <>
      <ButtonIcon>
        <Icon name="people" />
      </ButtonIcon>
      <ButtonIcon variant="outline">
        <Icon name="people" />
      </ButtonIcon>
      <ButtonIcon variant="text">
        <Icon name="people" />
      </ButtonIcon>
    </>
  );
}

Colors

Use the color prop to change the color of the button.

searchsearchsearch

settingssettingssettings

deletedeletedelete

mapmapmap

warningwarningwarning

checkcheckcheck

Show code

colors.tsx

import { ButtonIcon } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

const Icons = {
  primary: <Icon name="search" />,
  secondary: <Icon name="settings" />,
  error: <Icon name="delete" />,
  info: <Icon name="map" />,
  warning: <Icon name="warning" />,
  success: <Icon name="check" />,
};

const colors = Object.keys(Icons) as (keyof typeof Icons)[];

export function ButtonIconColors() {
  return (
    <>
      {colors.map((color) => (
        <div key={`button-icon-${color}`}>
          <ButtonIcon color={color}>{Icons[color]}</ButtonIcon>
          <ButtonIcon color={color} variant="outline">
            {Icons[color]}
          </ButtonIcon>
          <ButtonIcon color={color} variant="text">
            {Icons[color]}
          </ButtonIcon>
        </div>
      ))}
    </>
  );
}

Disabled

Add the disabled prop to disable the button. The disabled variant has a higher priority than the color variant.

toggle_offDisabled

listlistlistmusic_notemusic_notemusic_note

Show code

disabled.tsx

import { useState } from "react";
import { ButtonIcon } from "@hrc/button";
import { Icon } from "@hrc/material-icons";
import { ToggleDisabled } from "./ToggleDisabled";

export function ButtonIconDisabled() {
  const [disabled, setDisabled] = useState(false);

  return (
    <>
      <ToggleDisabled disabled={disabled} setter={setDisabled} />

      <ButtonIcon disabled={disabled}>
        <Icon name="list" />
      </ButtonIcon>
      <ButtonIcon variant="outline" disabled={disabled}>
        <Icon name="list" />
      </ButtonIcon>
      <ButtonIcon variant="text" disabled={disabled}>
        <Icon name="list" />
      </ButtonIcon>

      <ButtonIcon color="warning" disabled={disabled}>
        <Icon name="music_note" />
      </ButtonIcon>
      <ButtonIcon color="info" variant="outline" disabled={disabled}>
        <Icon name="music_note" />
      </ButtonIcon>
      <ButtonIcon color="success" variant="text" disabled={disabled}>
        <Icon name="music_note" />
      </ButtonIcon>
    </>
  );
}

ToggleDisabled.tsx

import { Button } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

type Props = {
  disabled: boolean;
  setter: (disabled: boolean) => void;
};

export function ToggleDisabled({ disabled, setter }: Props) {
  return (
    <div>
      <Button
        color={disabled ? "info" : undefined}
        onClick={() => setter(!disabled)}
      >
        <Icon name={disabled ? "toggle_on" : "toggle_off"} />
        Disabled
      </Button>
    </div>
  );
}

Sizes

Set the size prop to change the size of the button.

airairair

Show code

sizes.tsx

import { ButtonIcon } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

export function ButtonIconSizes() {
  return (
    <>
      <ButtonIcon color="info" size="small">
        <Icon name="air" />
      </ButtonIcon>
      <ButtonIcon color="info">
        <Icon name="air" />
      </ButtonIcon>
      <ButtonIcon color="info" size="large">
        <Icon name="air" />
      </ButtonIcon>
    </>
  );
}

Rounded

Add the roundedSide prop or set the fullRounded prop to change the button’s border radius.

adbadbadbadbadb

Show code

rounded.tsx

import { ButtonIcon } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

export function ButtonIconRounded() {
  return (
    <>
      <ButtonIcon color="success" roundedSide="top">
        <Icon name="adb" />
      </ButtonIcon>
      <ButtonIcon color="success" roundedSide="bottom">
        <Icon name="adb" />
      </ButtonIcon>
      <ButtonIcon color="success" roundedSide="left">
        <Icon name="adb" />
      </ButtonIcon>
      <ButtonIcon color="success" roundedSide="right">
        <Icon name="adb" />
      </ButtonIcon>
      <ButtonIcon color="success" fullRounded>
        <Icon name="adb" />
      </ButtonIcon>
    </>
  );
}

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for <ButtonIcon />:

• <ButtonIcon />