Icon

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

export function Basic() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Icon name="signature" size="lg" />
      <Icon name="file-text" size="lg" />
      <Icon name="mail" size="lg" />
      <Icon name="users" size="lg" />
      <Icon name="shield" size="lg" />
    </div>
  );
}

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

export function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((s) => (
        <Icon key={s} name="pen-nib" size={s} />
      ))}
    </div>
  );
}

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

export function Meaningful() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{ color: 'var(--st-color-success-fg)' }}>
        <Icon name="check-circle" size="md" label="Deployed" />
      </span>
      <Text size="sm" as="span">
        Acme Ltd signature
      </Text>
    </div>
  );
}

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

export function InButton() {
  return (
    <Button variant="outline" leadingIcon={<Icon name="upload" />}>
      Upload users
    </Button>
  );
}