import.design

Switch

Anatomy

States

Default · Off

Default · On

Hover · Off

Hover · On

Pressed · Off

Pressed · On

Focus · Off

Focus · On

Saving · Off

Saving · On

Disabled · Off

Disabled · On

Content

Reduce spacing around preview items.

Themes

Light

Dark

Primary override

Example

View code
import { Switch } from "@baseline/ui";
import { useState } from "react";

export function GridPreview() {
  const [showGrid, setShowGrid] = useState(false);

  return (
    <div>
      <label>
        <Switch
          checked={showGrid}
          onChange={(event) => setShowGrid(event.currentTarget.checked)}
        />
        Show grid
      </label>
      <div data-grid={showGrid ? "visible" : "hidden"}>Preview</div>
    </div>
  );
}