Text

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

export function Basic() {
  return <Text>Signatures are deployed to every mailbox in your organisation automatically.</Text>;
}

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

export function Tones() {
  return (
    <Stack gap={2}>
      <Text tone="default">Default: primary content</Text>
      <Text tone="muted">Muted: secondary information</Text>
      <Text tone="subtle">Subtle: tertiary detail</Text>
      <Text tone="success">Success: deployment completed</Text>
      <Text tone="warning">Warning: 3 users missing a job title</Text>
      <Text tone="danger">Danger: Exchange connection failed</Text>
    </Stack>
  );
}

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

export function Sizes() {
  return (
    <Stack gap={2}>
      {(['xl', 'lg', 'md', 'sm', 'xs', '2xs'] as const).map((s) => (
        <Text key={s} size={s}>
          {s}: Consistent foundations
        </Text>
      ))}
    </Stack>
  );
}

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

export function Truncation() {
  return (
    <Stack gap={3} style={{ maxWidth: 280 }}>
      <Text size="sm" truncate>
        Master services agreement, Acme Holdings International Ltd (revised)
      </Text>
      <Text size="sm" truncate={2} tone="muted">
        This agreement governs the provision of design, engineering and support services between the
        parties listed in schedule one.
      </Text>
    </Stack>
  );
}