Controls · 14 Props

Button

Interactive button with tone coloring, style variants, sizes, icon support, and window event dispatch. Renders as <a> when href is set, otherwise <button>.

Controls 14 Props

src/components/blocks/Button.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
ariaLabel	string	—
attrs	any	—	@deprecated Use direct props instead: `<Button data-x="y" @click="z">`
class	string	—
disabled	boolean	false
dispatch	any	—	Dispatcht ein CustomEvent auf window beim Klick. Kurzform: string (= event name). Langform: { event, detail? }
href	string	—
icon	string	—
iconClass	string	size-[1.2em]
iconPosition	string	end	"start" \| "end"
label	string	—
noShadow	boolean	true
rel	string	—
target	string	—	"_blank" \| "_self" \| "_parent" \| "_top"
type	string	button	"button" \| "submit" \| "reset"

Beispiele

Tones

Alle verfügbaren tone-Varianten.

{
  "type": "row",
  "props": {
    "gap": "sm",
    "align": "center",
    "wrap": true
  },
  "blocks": [
    {
      "type": "button",
      "props": {
        "label": "Primary",
        "tone": "primary"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Accent",
        "tone": "accent"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Secondary",
        "tone": "secondary"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Neutral",
        "tone": "neutral"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Error",
        "tone": "error"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Success",
        "tone": "success"
      }
    }
  ]
}

<Row gap="sm" align="center" wrap>
  <Button label="Primary" tone="primary" />
  <Button label="Accent" tone="accent" />
  <Button label="Secondary" tone="secondary" />
  <Button label="Neutral" tone="neutral" />
  <Button label="Error" tone="error" />
  <Button label="Success" tone="success" />
</Row>

Variants

solid, outline, soft, dash, ghost, link.

{
  "type": "row",
  "props": {
    "gap": "sm",
    "align": "center",
    "wrap": true
  },
  "blocks": [
    {
      "type": "button",
      "props": {
        "label": "Solid",
        "tone": "accent",
        "variant": "solid"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Outline",
        "tone": "accent",
        "variant": "outline"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Soft",
        "tone": "accent",
        "variant": "soft"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Dash",
        "tone": "accent",
        "variant": "dash"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Ghost",
        "tone": "accent",
        "variant": "ghost"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Link",
        "tone": "accent",
        "variant": "link"
      }
    }
  ]
}

<Row gap="sm" align="center" wrap>
  <Button label="Solid" tone="accent" variant="solid" />
  <Button label="Outline" tone="accent" variant="outline" />
  <Button label="Soft" tone="accent" variant="soft" />
  <Button label="Dash" tone="accent" variant="dash" />
  <Button label="Ghost" tone="accent" variant="ghost" />
  <Button label="Link" tone="accent" variant="link" />
</Row>

Sizes

Grössen xs bis lg.

{
  "type": "row",
  "props": {
    "gap": "sm",
    "align": "center",
    "wrap": true
  },
  "blocks": [
    {
      "type": "button",
      "props": {
        "label": "XS",
        "size": "xs",
        "tone": "primary"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Small",
        "size": "sm",
        "tone": "primary"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Medium",
        "size": "md",
        "tone": "primary"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Large",
        "size": "lg",
        "tone": "primary"
      }
    }
  ]
}

<Row gap="sm" align="center" wrap>
  <Button label="XS" size="xs" tone="primary" />
  <Button label="Small" size="sm" tone="primary" />
  <Button label="Medium" size="md" tone="primary" />
  <Button label="Large" size="lg" tone="primary" />
</Row>

Icons

Icon rechts (default) oder links via iconPosition.

{
  "type": "row",
  "props": {
    "gap": "sm",
    "align": "center",
    "wrap": true
  },
  "blocks": [
    {
      "type": "button",
      "props": {
        "label": "Icon rechts",
        "tone": "accent",
        "icon": "solar:arrow-right-linear"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Icon links",
        "tone": "accent",
        "icon": "solar:star-bold",
        "iconPosition": "start"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Outline + Icon",
        "tone": "primary",
        "variant": "outline",
        "icon": "solar:download-linear"
      }
    },
    {
      "type": "button",
      "props": {
        "label": "Ghost + Icon",
        "tone": "neutral",
        "variant": "ghost",
        "icon": "solar:settings-linear",
        "iconPosition": "start"
      }
    }
  ]
}

<Row gap="sm" align="center" wrap>
  <Button label="Icon rechts" tone="accent" icon="solar:arrow-right-linear" />
  <Button label="Icon links" tone="accent" icon="solar:star-bold" iconPosition="start" />
  <Button
    label="Outline + Icon"
    tone="primary"
    variant="outline"
    icon="solar:download-linear"
  />
  <Button
    label="Ghost + Icon"
    tone="neutral"
    variant="ghost"
    icon="solar:settings-linear"
    iconPosition="start"
  />
</Row>

Dispatch

Öffnet ein Modal über das dispatch Prop (CustomEvent auf window).

{
  "type": "row",
  "props": {
    "gap": "sm",
    "align": "center",
    "wrap": true
  },
  "blocks": [
    {
      "type": "button",
      "props": {
        "label": "Modal via Dispatch",
        "tone": "secondary",
        "variant": "outline",
        "icon": "solar:window-frame-line-duotone",
        "dispatch": {
          "event": "modal-open",
          "detail": "dispatch-demo-modal"
        }
      }
    },
    {
      "type": "modal",
      "props": {
        "id": "dispatch-demo-modal",
        "title": "Via Dispatch geöffnet",
        "subtitle": "Dieser Button nutzt das dispatch Prop statt triggerLabel.",
        "closeLabel": "Schliessen",
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Geöffnet über dispatch: { event: \"modal-open\", detail: \"dispatch-demo-modal\" }."
            }
          }
        ]
      }
    }
  ]
}

<Row gap="sm" align="center" wrap>
  <Button
    label="Modal via Dispatch"
    tone="secondary"
    variant="outline"
    icon="solar:window-frame-line-duotone"
    dispatch={{"event":"modal-open","detail":"dispatch-demo-modal"}}
  />
  <Modal
    id="dispatch-demo-modal"
    title="Via Dispatch geöffnet"
    subtitle="Dieser Button nutzt das dispatch Prop statt triggerLabel."
    closeLabel="Schliessen"
  />
</Row>