Toggle Button

import React from 'react';

import { ToggleButton } from 'react-magma-dom';

export function Example() {
  return <ToggleButton value="1">Toggle</ToggleButton>;
}

import React from 'react';

import { ToggleButton } from 'react-magma-dom';

export function Example() {
  return (
    <ToggleButton value="1" isChecked>
      Toggle
    </ToggleButton>
  );
}

import React from 'react';

import { Flex, FlexBehavior, ToggleButton } from 'react-magma-dom';
import { SettingsIcon } from 'react-magma-icons';

export function Example() {
  return (
    <>
      <Flex behavior={FlexBehavior.container} spacing={1}>
        <Flex behavior={FlexBehavior.item}>
          <ToggleButton
            value="1"
            icon={<SettingsIcon />}
            aria-label="Settings"
          />
        </Flex>
        <Flex behavior={FlexBehavior.item}>
          <ToggleButton value="2">Text only</ToggleButton>
        </Flex>
        <Flex behavior={FlexBehavior.item}>
          <ToggleButton value="3" icon={<SettingsIcon />}>
            Text and icon
          </ToggleButton>
        </Flex>
      </Flex>
    </>
  );
}

import React from 'react';

import { Flex, FlexBehavior, ToggleButton, ButtonSize } from 'react-magma-dom';
import { SettingsIcon } from 'react-magma-icons';

export function Example() {
  return (
    <>
      <Flex behavior={FlexBehavior.container} spacing={1}>
        <Flex behavior={FlexBehavior.item}>
          <ToggleButton
            value="1"
            size={ButtonSize.small}
            icon={<SettingsIcon />}
            aria-label="Settings"
          />
        </Flex>
        <Flex behavior={FlexBehavior.item}>
          <ToggleButton value="2" size={ButtonSize.medium}>
            Text only
          </ToggleButton>
        </Flex>
        <Flex behavior={FlexBehavior.item}>
          <ToggleButton
            value="3"
            size={ButtonSize.large}
            icon={<SettingsIcon />}
          >
            Text and icon
          </ToggleButton>
        </Flex>
      </Flex>
    </>
  );
}

import React from 'react';

import { Flex, FlexBehavior, ToggleButton } from 'react-magma-dom';
import { SettingsIcon } from 'react-magma-icons';

export function Example() {
  return (
    <>
      <Flex behavior={FlexBehavior.container} spacing={1}>
        <Flex behavior={FlexBehavior.item}>
          <ToggleButton
            value="1"
            disabled
            icon={<SettingsIcon />}
            aria-label="Settings"
          />
        </Flex>
        <Flex behavior={FlexBehavior.item}>
          <ToggleButton value="2" disabled>
            Text only
          </ToggleButton>
        </Flex>
        <Flex behavior={FlexBehavior.item}>
          <ToggleButton value="3" disabled icon={<SettingsIcon />}>
            Text and icon
          </ToggleButton>
        </Flex>
      </Flex>
    </>
  );
}

import React from 'react';

import { Container, Flex, FlexBehavior, ToggleButton } from 'react-magma-dom';
import { SettingsIcon } from 'react-magma-icons';

export function Example() {
  return (
    <Container isInverse style={{ padding: '12px' }}>
      <Flex behavior={FlexBehavior.container} spacing={1}>
        <Flex behavior={FlexBehavior.item}>
          <ToggleButton
            value="1"
            isInverse
            icon={<SettingsIcon />}
            aria-label="Settings"
          />
        </Flex>
        <Flex behavior={FlexBehavior.item}>
          <ToggleButton value="2" isInverse>
            Text only
          </ToggleButton>
        </Flex>
        <Flex behavior={FlexBehavior.item}>
          <ToggleButton value="3" isInverse icon={<SettingsIcon />}>
            Text and icon
          </ToggleButton>
        </Flex>
      </Flex>
    </Container>
  );
}