IconButton

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

export function Basic() {
  return <IconButton label="Copy signature HTML" icon={<Icon name="copy" />} variant="outline" />;
}

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

export function Variants() {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <IconButton variant="primary" label="Add user" icon={<Icon name="plus" />} />
      <IconButton variant="secondary" label="Filter" icon={<Icon name="filter" />} />
      <IconButton variant="outline" label="Download" icon={<Icon name="download" />} />
      <IconButton variant="ghost" label="More options" icon={<Icon name="more-horizontal" />} />
      <IconButton variant="danger" label="Delete" icon={<Icon name="trash" />} />
    </div>
  );
}

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

export function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <IconButton size="xs" variant="outline" label="Edit" icon={<Icon name="pencil" />} />
      <IconButton size="sm" variant="outline" label="Edit" icon={<Icon name="pencil" />} />
      <IconButton size="md" variant="outline" label="Edit" icon={<Icon name="pencil" />} />
      <IconButton size="lg" variant="outline" label="Edit" icon={<Icon name="pencil" />} />
    </div>
  );
}

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

export function Shapes() {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <IconButton
        shape="circle"
        variant="secondary"
        label="Previous"
        icon={<Icon name="chevron-left" />}
      />
      <IconButton
        shape="circle"
        variant="secondary"
        label="Next"
        icon={<Icon name="chevron-right" />}
      />
    </div>
  );
}