Sizes and icons

// apps/docs/examples/ui/button-sizes.tsx'use client';
import {ArrowRightIcon, PlusIcon} from 'lucide-react';
import {Button} from '@workspace/active-ui/components/primitives/button';
/** * Sizes, icons beside text, and icon-only buttons. An icon-only button has * no visible text, so it needs an accessible name of its own. */export default function ButtonSizes() {  return (    <div className="flex flex-col gap-4">      <div className="flex flex-wrap items-center gap-2">        <Button size="xs">Extra small</Button>        <Button size="sm">Small</Button>        <Button>Default</Button>        <Button size="lg">Large</Button>      </div>      <div className="flex flex-wrap items-center gap-2">        <Button variant="outline">          <PlusIcon data-icon="inline-start" aria-hidden />          New scheme        </Button>        <Button variant="outline">          Continue          <ArrowRightIcon data-icon="inline-end" aria-hidden />        </Button>        <Button variant="outline" size="icon" aria-label="Add a row">          <PlusIcon aria-hidden />        </Button>        <Button variant="outline" size="icon-sm" aria-label="Add a column">          <PlusIcon aria-hidden />        </Button>      </div>    </div>  );}