import { Button } from '@fvc/button';

import { Button } from '@fvc/button';

export function SaveAction() {
  return (
    <Button type="primary" onClick={() => handleSave()}>
      Save
    </Button>
  );
}

<Button type="primary">Submit</Button>
<Button type="secondary">Cancel</Button>

<Button type="danger">Delete</Button>
<Button danger type="secondary">Remove</Button>

<Button size="small">Small</Button>
<Button size="middle">Middle</Button>
<Button size="large">Large</Button>

import { Delete } from '@fvc/icons';

<Button icon={<Delete />} type="primary">Delete item</Button>

<Button icon={<Delete />} shape="circle" />
<Button icon={<Delete />} shape="round" type="secondary" />

<Button loading type="primary">Saving…</Button>
<Button loading loadingText="Uploading…" icon={<Upload />} type="secondary" />

<Button disabled type="primary">Unavailable</Button>

<Button block type="primary">Submit form</Button>

<Button bg="transparent" type="primary">Overlay action</Button>

import { Button } from '@fvc/button';
import { Save, Trash } from '@fvc/icons';

export function RecordActions({ saving, onSave, onDelete }) {
  return (
    <div>
      <Button
        type="primary"
        icon={<Save />}
        loading={saving}
        loadingText="Saving…"
        onClick={onSave}
      >
        Save
      </Button>

      <Button
        type="danger"
        icon={<Trash />}
        onClick={onDelete}
      >
        Delete
      </Button>
    </div>
  );
}

<Button type="primary" testId="save-button">
  Save
</Button>

screen.getByTestId('save-button');