Button

Preview

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


<Button>Click me</Button>

Installation

You can add the button component in two ways:

  1. During project initialization:
pnpm dlx make-sugarcube@latest init
npx make-sugarcube@latest init
yarn make-sugarcube@latest init
bunx --bun make-sugarcube@latest init

Then select the button component when prompted.

  1. After initialization:
pnpm dlx make-sugarcube@latest components button --framework astro-native
npx make-sugarcube@latest components button --framework astro-native
yarn make-sugarcube@latest components button --framework astro-native
bunx --bun make-sugarcube@latest components button --framework astro-native

What’s included

When you add the button component, you get:

  • button.astro - The Astro component implementation
  • button.css - The base styles for the button
  • button.variables.css - The CSS variables that map to your design tokens
---
export interface Props extends astroHTML.JSX.ButtonHTMLAttributes {
    asChild?: boolean;
}


const { class: className, asChild, ...props } = Astro.props;


const Tag = asChild ? Fragment : "button";
---


<Tag class:list={["button", className]} {...props}>
    <slot />
</Tag>
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    background-color: var(--button-bg);
    color: var(--button-fg);
    height: var(--button-height);
    border-color: var(--button-border-color);
    border-width: var(--button-border-width);
    border-style: var(--button-border-style);
    padding-inline: var(--button-padding-inline);
    padding-block: var(--button-padding-block);
    font-weight: var(--button-font-weight);
    border-radius: var(--button-radius);
    box-shadow: var(--button-shadow);
    letter-spacing: var(--button-tracking);
    line-height: var(--button-line-height);
    gap: var(--button-gap);
    font-size: var(--button-font-size);
    font-family: var(--button-font);
}


.button:hover {
    background-color: var(--button-bg-hover);
}


.button:active {
    background-color: var(--button-bg-active);
}
/* :root {
    --button-font: var(--font-sans);
    --button-font-weight: var(--font-weight-medium);
    --button-font-size: var(--text-sm);
    --button-leading: var(--leading-normal);
    --button-height: 36px;
    --button-radius: var(--radius-lg);
    --button-gap: var(--space-2xs);
    --button-text: var(--text-primary-inverted);
    --button-bg: var(--surface-primary-inverted);
    --button-bg-hover: var(--surface-hover-inverted);
    --button-bg-active: var(--surface-active-inverted);
    --button-padding-inline: var(--space-sm);
    --button-padding-block: var(--space-2xs);
    --button-border: solid 1px transparent;
    --button-shadow: var(--shadow-xs);
} */

Examples

:::note The following examples show how to use data attributes for variants. This is just one possible approach. See the principles section for more information on how to approach component variants. :::

Secondary

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


<Button data-variant="secondary">Secondary</Button>
/* .button[data-variant="secondary"] {
    --button-bg: var(--surface-secondary);
    --button-text: var(--text-primary);
    --button-bg-hover: var(--surface-secondary-hover);
    --button-bg-active: var(--surface-secondary-active);
} */

Danger

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


<Button data-variant="danger">Danger</Button>
.button[data-variant="danger"] {
    --button-bg: var(--bg-danger);
    --button-fg: var(--color-white);
    --button-bg-hover: var(--bg-danger-hover);
    --button-bg-active: var(--bg-danger-active);
}