Skip to content
eris ui
GitHub
Browse docs

Button

Beta

A pill button with five variants and four sizes.

---
import Button from "@/components/ui/button/Button.astro";
---

<Button>Save changes</Button>
<Button variant="accent">Get All-Access</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Delete</Button>

Installation

npx eris-ui@latest add button
pnpm dlx eris-ui@latest add button
bunx eris-ui@latest add button
yarn dlx eris-ui@latest add button

Variants

primary is the default. Use accent for the one action you most want people to take on a screen, such as buying or upgrading. danger is for destructive actions.

Sizes

---
import Button from "@/components/ui/button/Button.astro";
---

<Button size="sm" variant="secondary">
  Small
</Button>
<Button variant="secondary">Medium</Button>
<Button size="lg" variant="secondary">
  Large
</Button>
<Button size="icon" variant="secondary" aria-label="Add item">
  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
    <path d="M8 3v10M3 8h10"></path>
  </svg>
</Button>
<Button variant="secondary" disabled>
  Disabled
</Button>

icon makes a square button. Give it an aria-label, since there is no visible text.

Pass href and the button renders an <a>, so it navigates like a link and screen readers announce it as one.

Get started 
---
import Button from "@/components/ui/button/Button.astro";
---

<Button href="/docs/installation" variant="primary">
  Get started
</Button>

Props

Prop Type Default
variant "primary" | "accent" | "secondary" | "ghost" | "danger" "primary"
size "sm" | "md" | "lg" | "icon" "md"
href string none; renders a <button>

Other attributes, such as disabled or type, go straight to the element.