Button

Display a text button with or without: icons, loaders, redirects

Contrary to html standards, by defaults buttons type will be `button` even if it's used inside a form. Make sure to set the type to submit when needed

Anatomy

import { Button } from '@onwo/ui';

<Button> Default </Button>

Default

<Button> Default </Button>

Variants

<Button> Default </Button>
<Button variant="outline"> Outline </Button>
<Button variant="ghost"> Ghost </Button>

Sizes

<Button size="xs" start={GenericSettingsIcon}>Size XS</Button>
<Button size="sm" start={GenericSettingsIcon}>Size SM</Button>
<Button size="md" start={GenericSettingsIcon}>Size MD</Button>
<Button size="lg" start={GenericSettingsIcon}>Size LG</Button>
<Button size="xl" start={GenericSettingsIcon}>Size XL</Button>

Icons will scale up alongside buttons, spacing will also differ when a button is added through the `start` or `end` props as shown in the following figure, it is generally advised to use them.

Icon position

<Button size="md" start={GenericSettingsIcon}>Button start</Button>
<Button size="md" end={GenericSettingsIcon}>Button end</Button>

Custom icons

import { primitives as P } from '@onwo/ui';
const CustomIcon = (_: P.IconProps) => <b>🚀</b>;
<Button size="md" variant="outline" end={CustomIcon}>Custom</Button>

Dynamic tags

<Button as="a" href="/" target="_blank">
  Default
</Button>

Changing which tag is rendered is trivial, but rather than changing the tag to an `a` element it is instead advised to wrap button element inside Link elements as you won't benefit from qwik.js cross-page optimizations otherwise.