Toggle

The Toggle is a type of button that allows the user to switch between two possible states.

Importation

Import the component from pol-ui to use the Toggle element:

import { Toggle } from "pol-ui";

Default Toggle

import { Toggle } from "pol-ui";
import { TbBold, TbItalic, TbUnderline } from "react-icons/tb";
export const ToggleComponent = () => {
  return (
    <div className="flex gap-2">
      <Toggle onClick={toggle} active={value}>
        <TbBold />
      </Toggle>
      <Toggle onClick={t2} active={v2}>
        <TbItalic />
      </Toggle>
      <Toggle onClick={t3} active={v3}>
        <TbUnderline />
      </Toggle>
    </div>
  );
};

Props

Prop name	Type	Default	Description
active	boolean	false	The state of the toggle
children	React.ReactNode	-	The content of the toggle
rounded	RoundedSizes	'xl'	The rounded size of the toggle
theme	ToggleTheme	-	The theme of the toggle
color	Colors	ColorsEnum.primary	The color of the toggle
disabled	boolean	false	The state of the toggle
onClick	(e) => void	-	The function to call when the toggle is clicked

💡

You can also provide any prop comming from the HTML button tag.

Examples

Some Toggle examples

Toggle Examples

import { Toggle } from "pol-ui";
import { TbHome } from "react-icons/tb";
export const AllColors = () => {
  const { value: v1, toggle: t1 } = useBoolean(false);
  const { value: v2, toggle: t2 } = useBoolean(false);
  const { value: v3, toggle: t3 } = useBoolean(false);
  const { value: v4, toggle: t4 } = useBoolean(false);
  const { value: v5, toggle: t5 } = useBoolean(false);
  const { value: v6, toggle: t6 } = useBoolean(false);
  return (
    <div className="flex flex-col gap-2 flex-wrap">
      <div className="flex gap-2 flex-wrap p-2 bg-secondary-50">
        <Toggle onClick={t1} active={v1} color="primary">
          <TbHome />
        </Toggle>
        <Toggle onClick={t2} active={v2} color="secondary">
          <TbHome />
        </Toggle>
        <Toggle onClick={t3} active={v3} color="warning">
          <TbHome />
        </Toggle>
        <Toggle onClick={t4} active={v4} color="info">
          <TbHome />
        </Toggle>
        <Toggle onClick={t5} active={v5} color="success">
          <TbHome />
        </Toggle>
        <Toggle onClick={t6} active={v6} color="error">
          <TbHome />
        </Toggle>
        <Button>Click me</Button>
      </div>
      <div className="flex gap-2 flex-wrap dark bg-secondary-900 p-2">
        <Toggle onClick={t1} active={v1} color="primary">
          <TbHome />
        </Toggle>
        <Toggle onClick={t2} active={v2} color="secondary">
          <TbHome />
        </Toggle>
        <Toggle onClick={t3} active={v3} color="warning">
          <TbHome />
        </Toggle>
        <Toggle onClick={t4} active={v4} color="info">
          <TbHome />
        </Toggle>
        <Toggle onClick={t5} active={v5} color="success">
          <TbHome />
        </Toggle>
        <Toggle onClick={t6} active={v6} color="error">
          <TbHome />
        </Toggle>
      </div>
    </div>
  );
};

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

enum BooleanEnum {
  off = "off",
  on = "on",
}
interface ToggleTheme {
  base: string;
  rounded: RoundedSizesTypes;
  active: Record<
    BooleanEnum,
    {
      base: string;
      colors: ColorsType;
    }
  >;
}