Button

Renders a <button>, or an <a> when it gets an href.

---
import { Button } from 'bws-astro-ui';
---

<Button>Save</Button>
<Button href="/contact">Contact</Button>

Variants

ElevatedFlatTonalOutlinedText

<Button variant="elevated">Elevated</Button>
<Button variant="flat">Flat</Button>
<Button variant="tonal">Tonal</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>

Colors

PrimarySecondarySuccessWarningInfoError

<Button color="secondary">Secondary</Button>
<Button color="error" variant="outlined">
  Delete
</Button>

Hover and pressed states and the tonal background are derived from the color, so any brand color works without defining shades.

Sizes and rounding

xssmdefaultlgxl

xssmdefaultlgxlfull

<Button size="lg" rounded="full">
  Book a call
</Button>
<Button block>Full width</Button>

Icons

Put an Icon inside — without a size it follows the button’s text size.

Next Download

---
import { Button, Icon } from 'bws-astro-ui';
import { ArrowRight } from 'bws-astro-ui/icons';
---

<Button>
  Next <Icon icon={ArrowRight} />
</Button>

Links, forms and disabled buttons

LinkSubmitDisabled

<Button href="/pricing" target="_blank">
  Link
</Button>
<Button type="submit">Submit</Button>
<Button disabled>Disabled</Button>

A <button> defaults to type="button", so it never submits a form by accident — set type="submit" for that. With href the button takes link attributes (target, rel, download…), without it button attributes (type, disabled, name, form…); TypeScript flags mixing them, e.g. disabled on a link.

Overriding classes

Classes passed in class replace the conflicting defaults (merged with tailwind-merge):

Custom

API

Prop	Type	Default
variant	elevated · flat · tonal · outlined · text	elevated
color	primary · secondary · success · warning · info · error	primary
size	xs · sm · default · lg · xl	default
rounded	xs · sm · default · lg · xl · full	default
block	boolean — full width	false
href	string — renders an <a>	—
class	string — merged over the defaults	—

Any other attribute goes to the <button> / <a>. Slot: default — the content.