Default Gray Amethyst

Tab

<mo-tab> | MOTab
Since 1.0 stable

Tabs are used inside tab groups to represent and activate tab panels.

Tab Active Closable Disabled 
<mo-tab>Tab</mo-tab>
<mo-tab active>Active</mo-tab>
<mo-tab closable>Closable</mo-tab>
<mo-tab disabled>Disabled</mo-tab>

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

const App = () => (
  <>
    <MOTab>Tab</MOTab>
    <MOTab active>Active</MOTab>
    <MOTab closable>Closable</MOTab>
    <MOTab disabled>Disabled</MOTab>
  </>
);

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

To import this component as a React component:

import MOTab from '@metsooutotec/modes-web-components/dist/react/tab/';

To import this component using a script tag:

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

Slots

Name Description
(default) The tab’s label.

Learn more about using slots.

Properties

Name Description Reflects Type Default
panel The name of the tab panel the tab will control. The panel must be located in the same tab group. string ''
active Draws the tab in an active state. boolean false
closable Makes the tab closable and shows a close icon. boolean false
disabled Draws the tab in a disabled state. boolean false
lang The locale to render the component in. string -
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-close onMoClose Emitted when the tab is closable and the close button is activated. -

Learn more about events.

Methods

Name Description Arguments
focus() Sets focus to the tab. options: FocusOptions
blur() Removes focus from the tab. -

Learn more about methods.

Parts

Name Description
base The component’s internal wrapper.
close-button The close button.
close-button__base The close button’s base part.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.