Button

import { Button } from 'fluxo-ui';

<Button onClick={() => console.log('Clicked!')}>Click me</Button>

<Button variant="default">Default</Button>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="danger">Danger</Button>
<Button variant="info">Info</Button>

<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>

<Button layout="default" variant="primary">Default</Button>
<Button layout="outlined" variant="primary">Outlined</Button>
<Button layout="sharp" variant="primary">Sharp</Button>
<Button layout="rounded" variant="primary">Rounded</Button>
<Button layout="plain" variant="primary">Plain</Button>

<Button>Normal</Button>
<Button disabled>Disabled</Button>
<Button isLoading={loading} onClick={handleAsyncAction}>
  {loading ? 'Loading...' : 'Async Action'}
</Button>

<Button fullWidth>Full Width Button</Button>

<Button leftIcon={<PlusIcon />}>Left Icon</Button>
<Button rightIcon={<ArrowRightIcon />}>Right Icon</Button>
<Button leftIcon={<DownloadIcon />} variant="success">Download</Button>

<Button leftIcon={<TrashIcon />} tooltip="Delete item" ariaLabel="Delete item" variant="danger" />
<Button leftIcon={<CogIcon />} tooltip="Open settings" ariaLabel="Settings" layout="plain" />
<Button tooltip="Saves your work to the cloud" variant="primary">Save</Button>

<Button
    variant="danger"
    confirmText="Are you sure you want to delete this item? This cannot be undone."
    confirmTitle="Delete item"
    confirmOkText="Delete"
    onClick={() => deleteItem()}
>
    Delete
</Button>

<Button onClick={async () => {
  await fetch('/api/data');
}}>
  Save Data
</Button>

<Button waitFor={5} variant="warning">
  Confirm Action
</Button>

<Button href="https://example.com" variant="primary">
  External Link
</Button>
<Button href="https://example.com" newTab variant="secondary">
  Open in New Tab
</Button>

<Button layout="outlined" variant="success">Outlined Success</Button>
<Button layout="sharp" variant="primary">Sharp Primary</Button>
<Button layout="rounded" variant="danger">Rounded Danger</Button>
<Button layout="plain" variant="primary">Plain Primary</Button>