Default Gray Amethyst

Chip

<mo-chip> | MOChip
Since 1.0 stable

Chips are used as labels to organize things or to indicate a selection.

Primary Neutral Info Success Warning Alert 
<mo-chip pill variant="primary">Primary</mo-chip>
<mo-chip pill variant="neutral">Neutral</mo-chip>
<mo-chip pill variant="info">Info</mo-chip>
<mo-chip pill variant="success">Success</mo-chip>
<mo-chip pill variant="warning">Warning</mo-chip>
<mo-chip pill variant="alert">Alert</mo-chip>

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

const App = () => (
  <>
    <MOChip variant="primary">Primary</MOChip>
    <MOChip variant="neutral">Neutral</MOChip>
    <MOChip variant="info">Info</MOChip>
    <MOChip variant="success">Success</MOChip>
    <MOChip variant="warning">Warning</MOChip>
    <MOChip variant="alert">Alert</MOChip>
  </>
);

Examples

Sizes

Use the size attribute to change a chip’s size.

Small Medium Large 
<mo-chip size="small">Small</mo-chip>
<mo-chip size="medium">Medium</mo-chip>
<mo-chip size="large">Large</mo-chip>

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

const App = () => (
  <>
    <MOChip size="small">Small</MOChip>
    <MOChip size="medium">Medium</MOChip>
    <MOChip size="large">Large</MOChip>
  </>
);

Pill

Use the pill attribute to give chips rounded edges.

Small Medium Large 
<mo-chip size="small" pill>Small</mo-chip>
<mo-chip size="medium" pill>Medium</mo-chip>
<mo-chip size="large" pill>Large</mo-chip>

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

const App = () => (
  <>
    <MOChip size="small" pill>
      Small
    </MOChip>
    <MOChip size="medium" pill>
      Medium
    </MOChip>
    <MOChip size="large" pill>
      Large
    </MOChip>
  </>
);

Status chips

Assign a status to the variant attribute to give chips a status color.

Success Warning Alert 
<mo-chip pill variant="success">Success</mo-chip>
<mo-chip pill variant="warning">Warning</mo-chip>
<mo-chip pill variant="alert">Alert</mo-chip>

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

const App = () => (
  <>
    <MOChip pill variant="success">
      Success
    </MOChip>
    <MOChip pill variant="warning">
      Warning
    </MOChip>
    <MOChip pill variant="alert">
      Alert
    </MOChip>
  </>
);

Outlined

Use the outline attribute to style the chips as outlined.

Primary Info Success Warning Alert 
<mo-chip pill outline>Primary</mo-chip>
<mo-chip pill variant="info" outline>Info</mo-chip>
<mo-chip pill variant="success" outline>Success</mo-chip>
<mo-chip pill variant="warning" outline>Warning</mo-chip>
<mo-chip pill variant="alert" outline>Alert</mo-chip>

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

const App = () => (
  <>
    <MOChip size="small" pill>
      Small
    </MOChip>
    <MOChip size="medium" pill>
      Medium
    </MOChip>
    <MOChip size="large" pill>
      Large
    </MOChip>
  </>
);

With an icon

Use the prefix and suffix slots to add additional content, such as icons, inside the chip.

Info Success Warning Alert 
<mo-chip pill variant="info" outline>
  <mo-icon name="info" slot="prefix"></mo-icon>
  Info
</mo-chip>
<mo-chip pill variant="success" outline>
  <mo-icon name="ok-circle" slot="prefix"></mo-icon>
  Success
</mo-chip>
<mo-chip pill variant="warning" outline>
  <mo-icon name="exclamation-mark-circle" slot="prefix"></mo-icon>
  Warning
</mo-chip>
<mo-chip pill variant="alert" outline>
  <mo-icon name="alarm" slot="prefix"></mo-icon>
  Alert
</mo-chip>

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

const App = () => (
  <>
    <MOChip size="small" pill>
      Small
    </MOChip>
    <MOChip size="medium" pill>
      Medium
    </MOChip>
    <MOChip size="large" pill>
      Large
    </MOChip>
  </>
);

Selectable

Use the selectable attribute to allow users to select/deselect the chip.

Small Medium Large 
<div class="chips-selectable">
  <mo-chip size="small" pill selectable>Small</mo-chip>
  <mo-chip size="medium" pill selectable>Medium</mo-chip>
  <mo-chip size="large" pill selectable>Large</mo-chip>
</div>

<script>
  const div = document.querySelector('.chips-selectable');

  div.addEventListener('mo-remove', event => {
    const chip = event.target;
    chip.style.opacity = '0';
    setTimeout(() => (chip.style.opacity = '1'), 2000);
  });
</script>

<style>
  .chips-selectable mo-chip {
    transition: var(--mo-transition-medium) opacity;
  }
</style>

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

const css = `
  .chips-removable mo-chip {
    transition: var(--mo-transition-medium) opacity;
  }
`;

const App = () => {
  function handleRemove(event) {
    const chip = event.target;
    chip.style.opacity = '0';
    setTimeout(() => (chip.style.opacity = '1'), 2000);
  }

  return (
    <>
      <div className="chips-removable">
        <MOChip size="small" removable onMoRemove={handleRemove}>
          Small
        </MOChip>

        <MOChip size="medium" removable onMoRemove={handleRemove}>
          Medium
        </MOChip>

        <MOChip size="large" removable onMoRemove={handleRemove}>
          Large
        </MOChip>
      </div>

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

Removable

Use the removable attribute to add a remove button to the chip.

Small Medium Large 
<div class="chips-removable">
  <mo-chip size="small" pill removable>Small</mo-chip>
  <mo-chip size="medium" pill removable>Medium</mo-chip>
  <mo-chip size="large" pill removable>Large</mo-chip>
</div>

<script>
  const div = document.querySelector('.chips-removable');

  div.addEventListener('mo-remove', event => {
    const chip = event.target;
    chip.style.opacity = '0';
    setTimeout(() => (chip.style.opacity = '1'), 2000);
  });
</script>

<style>
  .chips-removable mo-chip {
    transition: var(--mo-transition-medium) opacity;
  }
</style>

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

const css = `
  .chips-removable mo-chip {
    transition: var(--mo-transition-medium) opacity;
  }
`;

const App = () => {
  function handleRemove(event) {
    const chip = event.target;
    chip.style.opacity = '0';
    setTimeout(() => (chip.style.opacity = '1'), 2000);
  }

  return (
    <>
      <div className="chips-removable">
        <MOChip size="small" removable onMoRemove={handleRemove}>
          Small
        </MOChip>

        <MOChip size="medium" removable onMoRemove={handleRemove}>
          Medium
        </MOChip>

        <MOChip size="large" removable onMoRemove={handleRemove}>
          Large
        </MOChip>
      </div>

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

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/chip/chip.js';

To import this component as a React component:

import MOChip from '@metsooutotec/modes-web-components/dist/react/chip/';

To import this component using a script tag:

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

Slots

Name Description
(default) The chip’s content.

Learn more about using slots.

Properties

Name Description Reflects Type Default
variant The chip’s variant. 'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'alert' | 'text' 'primary'
size The chip’s size. 'small' | 'medium' | 'large' 'medium'
pill Draws a pill-style chip with rounded edges. boolean false
outline Draws an outlined chip. boolean false
removable Makes the chip removable. boolean false
selectable Makes the chip selectable. boolean false
selected Renders the chip as selected. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
mo-remove onMoRemove Emitted when the remove button is activated. -

Learn more about events.

Parts

Name Description
base The component’s internal wrapper.
content The chip content.
remove-button The remove button.
remove-button__base The remove button’s base part.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.