Default Gray Amethyst

Icon Button

<mo-icon-button> | MOIconButton
Since 1.0 stable

Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.

For a full list of icons that come bundled with Modes UI, refer to the zeroheight documentation. 

<mo-icon-button name="settings" label="Settings"></mo-icon-button>

import { MOIconButton } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOIconButton name="settings" label="Settings" />;

Examples

Sizes

Icon buttons inherit their parent element’s font-size.

<mo-icon-button name="edit" label="Edit" style="font-size: 1.5rem;"></mo-icon-button>
<mo-icon-button name="edit" label="Edit" style="font-size: 2rem;"></mo-icon-button>
<mo-icon-button name="edit" label="Edit" style="font-size: 2.5rem;"></mo-icon-button>

import { MOIconButton } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    <MOIconButton name="edit" label="Edit" style={{ fontSize: '1.5rem' }} />
    <MOIconButton name="edit" label="Edit" style={{ fontSize: '2rem' }} />
    <MOIconButton name="edit" label="Edit" style={{ fontSize: '2.5rem' }} />
  </>
);

Colors

Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the base part. 

<div class="icon-button-color">
  <mo-icon-button name="plus" label="Bold"></mo-icon-button>
  <mo-icon-button name="plus" label="Italic"></mo-icon-button>
  <mo-icon-button name="plus" label="Underline"></mo-icon-button>
</div>

<style>
  .icon-button-color mo-icon-button::part(base) {
    color: #b00091;
  }

  .icon-button-color mo-icon-button::part(base):hover,
  .icon-button-color mo-icon-button::part(base):focus {
    color: #c913aa;
  }

  .icon-button-color mo-icon-button::part(base):active {
    color: #960077;
  }
</style>

import { MOIconButton } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .icon-button-color mo-icon-button::part(base) {
    color: #b00091;
  }

  .icon-button-color mo-icon-button::part(base):hover,
  .icon-button-color mo-icon-button::part(base):focus {
    color: #c913aa;
  }

  .icon-button-color mo-icon-button::part(base):active {
    color: #960077;
  }
`;

const App = () => (
  <>
    <div className="icon-button-color">
      <MOIconButton name="type-bold" label="Bold" />
      <MOIconButton name="type-italic" label="Italic" />
      <MOIconButton name="type-underline" label="Underline" />
    </div>

    <style>{css}</style>
  </>
);

Use the href attribute to convert the button to a link.

<mo-icon-button name="settings" label="Settings" href="https://example.com" target="_blank"></mo-icon-button>

import { MOIconButton } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOIconButton name="settings" label="Settings" href="https://example.com" target="_blank" />;

Icon button with tooltip

Wrap a tooltip around an icon button to provide contextual information to the user.

<mo-tooltip content="Settings">
  <mo-icon-button name="settings" label="Settings"></mo-icon-button>
</mo-tooltip>

import { MOIconButton, MOTooltip } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTooltip content="Settings">
    <MOIconButton name="settings" label="Settings" />
  </MOTooltip>
);

Outlined

Use the outlined attribute to outline the icon button.

<mo-icon-button name="edit" label="Edit" outlined></mo-icon-button>

import { MOIconButton } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOIconButton name="edit" label="Edit" outlined />;

Disabled

Use the disabled attribute to disable the icon button.

<mo-icon-button name="settings" label="Settings" disabled></mo-icon-button>

import { MOIconButton } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOIconButton name="settings" label="Settings" disabled />;

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/icon-button/icon-button.js';

To import this component as a React component:

import MOIconButton from '@metsooutotec/modes-web-components/dist/react/icon-button/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/icon-button/icon-button.js"></script>

Properties

Name Description Reflects Type Default
name The name of the icon to draw. string | undefined -
library The name of a registered custom icon library. string | undefined -
src An external URL of an SVG file. string | undefined -
href When set, the underlying button will be rendered as an <a> with this href instead of a <button>. string | undefined -
target Tells the browser where to open the link. Only used when href is set. '_blank' | '_parent' | '_self' | '_top' | undefined -
download Tells the browser to download the linked file as this filename. Only used when href is set. string | undefined -
size The size of the icon button. 'small' | 'medium' | 'large' | undefined 'medium'
label A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should always include a label that describes what the icon button does. string ''
outlined Outlines the button. boolean false
chevron Adds a chevron after the icon. boolean false
circle Makes the button circle shaped. boolean false
active Makes the button active. boolean false
disabled Disables the button. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s internal wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.