Mantine UIFAQColors generator

Toggle

A toggleable button with active/inactive states

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/core

Usage

Toggle is a button that can be toggled between active and inactive states. It is a polymorphic component and can be rendered as any element.

import { TextBIcon, TextItalicIcon, TextUnderlineIcon } from '@phosphor-icons/react';
import { Group, Toggle } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <Toggle aria-label="Bold">
        <TextBIcon weight="bold" size="100%" />
      </Toggle>
      <Toggle aria-label="Italic">
        <TextItalicIcon weight="bold" size="100%" />
      </Toggle>
      <Toggle aria-label="Underline">
        <TextUnderlineIcon weight="bold" size="100%" />
      </Toggle>
    </Group>
  );
}

Controlled and uncontrolled

Use defaultActive to set the initial state of an uncontrolled Toggle, active and onActiveChange props to control it.

import { useState } from 'react';
import { Toggle } from '@mantine/core';

// Uncontrolled
function UncontrolledDemo() {
  return <Toggle defaultActive />;
}

// Controlled
function ControlledDemo() {
  const [active, setActive] = useState(false);
  return <Toggle active={active} onActiveChange={setActive} />;
}

Auto contrast

Set autoContrast prop to automatically adjust icon color based on the active toggle background color, for example with variant="filled" and light colors.

import { TextBIcon } from '@phosphor-icons/react';
import { Group, Toggle } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <Toggle active variant="filled" color="lime.4" aria-label="Without autoContrast">
        <TextBIcon weight="bold" size="100%" />
      </Toggle>
      <Toggle autoContrast active variant="filled" color="lime.4" aria-label="With autoContrast">
        <TextBIcon weight="bold" size="100%" />
      </Toggle>
    </Group>
  );
}

Auto width

By default, Toggle renders as a square button. Set autoWidth to allow the width to adjust to content.

import { Group, Toggle } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <Toggle autoWidth>Save</Toggle>
      <Toggle autoWidth active>Active</Toggle>
      <Toggle autoWidth disabled>Disabled</Toggle>
    </Group>
  );
}

Configurator

Variant
Color
Size
Radius
import { TextBIcon } from '@phosphor-icons/react';
import { Toggle } from '@mantine/core';

function Demo() {
  return (
    <Toggle color="blue" aria-label="Bold">
      <TextBIcon weight="bold" size="100%" />
    </Toggle>
  );
}

Accessibility

Toggle renders a button element with aria-pressed attribute that reflects the active state. When using icon-only toggles, provide an aria-label prop so that screen readers can announce the button purpose.

When Toggle is rendered as a non-button element (for example, component="a"), the disabled prop sets aria-disabled, removes the element from the tab order and prevents clicks.

FileButton

UnstyledButton