Button

Interaktives Control für primäre und sekundäre Aktionen.

Wann nutzen

• Primäre CTAs mit variant="primary"
• Sekundäre Aktionen mit secondary, outline oder ghost
• Inline-Links mit variant="link"
• Destruktive Aktionen (Löschen) mit variant="destructive"

Wann nicht

• Status-Labels (dafür Badge)
• Gruppierte Inhalte (dafür Card)
• destructive für normale Navigation

Variants

PrimarySecondaryOutlineGhostDestructiveLink

Sizes

SmallMediumLarge

Props

Prop	Typ	Default
variant	primary | secondary | outline | ghost | destructive | link	primary
size	sm | md | lg	md
href	string	— (rendert <a>)
type	button | submit | reset	button
disabled	boolean	false
class	string	—

Verwandte Komponenten

Badge · Hero v1

Anti-Patterns

• Keine Hex-Farben (tw:bg-[#fff])
• Prefix tw:, nie tw-
• Keine Marken-Tokens in addxion-neon
• destructive nicht für Links oder Navigation

Usage

---
import Button from '@addxion/components/Button';
---

<Button href="/docs/neon/">Get started</Button>
<Button variant="secondary">Secondary</Button>

HTML Referenz

<button class="tw:inline-flex tw:items-center tw:justify-center tw:font-medium tw:bg-primary tw:text-primary-foreground tw:px-4 tw:py-2 tw:rounded-md">
  Primary
</button>

Truths

ID	Wahrheit
T-PKG-NEON	Consumer-Einstieg: @addxion/neon, nicht @addxion/core
T-NEON-BRAND	Markenwerte in Consumer brand.css

Für Agents

Scope: Neon Button-Komponente — API und Verwendung.

• Aus @addxion/neon/react importieren
• Varianten und Tokens nicht in Consumern neu definieren