@hig/icon-button

Icon Button

Action buttons that include an icon only, with no background. Useful for compact displays or toolbars with a number of related controls.

Read more about where and how to use IconButton on the website.

Getting started

yarn add @hig/icon-button

Import the component

import IconButton from '@hig/icon-button @hig/theme-context @hig/theme-data';

Typical usage

Use the name prop to render a provided icon by name.

import { Assets24 } from "@hig/icons"

function MyComponent() {
  return (
    <IconButton
      icon={<Assets24 />}
      onClick={() => console.log('Clicked it.')}
    />
  );
}

Providing a custom SVG

import myIcon from 'my-icon.svg';

function MyComponent() {
  return (
    <IconButton
      icon={myIcon}
      onClick={() => console.log('Clicked it.')}
    />
  );
}