Divider

import { Divider, Text } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ width: '100%' }}>
      <Text size="sm">Signature details</Text>
      <Divider />
      <Text size="sm">Deployment settings</Text>
    </div>
  );
}

import { Button, Divider, Stack } from '@bindshq/stance-react';

export function Labelled() {
  return (
    <Stack gap={0} style={{ width: '100%', maxWidth: 360 }}>
      <Button variant="outline" fullWidth>
        Continue with Microsoft
      </Button>
      <Divider label="or" spacing={4} />
      <Button fullWidth>Continue with email</Button>
    </Stack>
  );
}

import { Divider } from '@bindshq/stance-react';

export function Variants() {
  return (
    <div style={{ width: '100%' }}>
      <Divider tone="subtle" label="Subtle" labelPosition="start" />
      <Divider tone="strong" label="Strong" />
      <Divider variant="dashed" label="Dashed" labelPosition="end" />
    </div>
  );
}