Switch

tsx

import React from 'react';
import Switch from 'intergalactic/switch';

const Demo = () => {
  return (
    <Switch size='l' theme='success'>
      <Switch.Value defaultChecked={true} ml={0} />
      <Switch.Addon>Receive updates</Switch.Addon>
    </Switch>
  );
};

export default Demo;

import React from 'react';
import Switch from 'intergalactic/switch';

const Demo = () => {
  return (
    <Switch size='l' theme='success'>
      <Switch.Value defaultChecked={true} ml={0} />
      <Switch.Addon>Receive updates</Switch.Addon>
    </Switch>
  );
};

export default Demo;

tsx

import React from 'react';
import Switch from 'intergalactic/switch';
import CheckM from 'intergalactic/icon/Check/m';

const Demo = () => {
  return (
    <Switch size='l' theme='success'>
      <Switch.Value defaultChecked={true} ml={0}>
        <CheckM />
      </Switch.Value>
      <Switch.Addon>Have a great day</Switch.Addon>
    </Switch>
  );
};

export default Demo;

import React from 'react';
import Switch from 'intergalactic/switch';
import CheckM from 'intergalactic/icon/Check/m';

const Demo = () => {
  return (
    <Switch size='l' theme='success'>
      <Switch.Value defaultChecked={true} ml={0}>
        <CheckM />
      </Switch.Value>
      <Switch.Addon>Have a great day</Switch.Addon>
    </Switch>
  );
};

export default Demo;

tsx

import React from 'react';
import Switch from 'intergalactic/switch';
import CheckM from 'intergalactic/icon/Check/m';
import { Text } from 'intergalactic/typography';
import { Box, Flex } from 'intergalactic/flex-box';

const Demo = () => {
  return (
    <Flex gap={2} alignItems='center'>
      <Text tag='label' size={200} htmlFor='email-subscription'>
        Email subscription
      </Text>
      <Box>
        <Switch size='l' theme='success'>
          <Switch.Value id='email-subscription' mt={0}>
            <CheckM />
          </Switch.Value>
        </Switch>
      </Box>
    </Flex>
  );
};

export default Demo;

import React from 'react';
import Switch from 'intergalactic/switch';
import CheckM from 'intergalactic/icon/Check/m';
import { Text } from 'intergalactic/typography';
import { Box, Flex } from 'intergalactic/flex-box';

const Demo = () => {
  return (
    <Flex gap={2} alignItems='center'>
      <Text tag='label' size={200} htmlFor='email-subscription'>
        Email subscription
      </Text>
      <Box>
        <Switch size='l' theme='success'>
          <Switch.Value id='email-subscription' mt={0}>
            <CheckM />
          </Switch.Value>
        </Switch>
      </Box>
    </Flex>
  );
};

export default Demo;