Button

import { Button } from "@araf-ds/core"

export default function Example() {
  return <Button>Click me</Button>
}

<Button color="primary">Save changes</Button>
<Button color="primary" isDisabled>Disabled</Button>

<Button color="secondary">Secondary</Button>
<Button color="secondary-gray">Secondary Gray</Button>

<Button color="tertiary">Tertiary</Button>
<Button color="tertiary-gray">Tertiary Gray</Button>

<Button color="link-color">View profile</Button>
<Button color="link-gray">Terms of service</Button>

<Button color="primary-destructive">Delete account</Button>
<Button color="secondary-destructive">Remove</Button>
<Button color="tertiary-destructive">Discard changes</Button>

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
<Button size="2xl">2X Large</Button>

<Button>Default</Button>
<Button isDisabled>Disabled</Button>
<Button isLoading>Loading</Button>
<Button isLoading showTextWhileLoading>Saving changes</Button>

import { Button } from "@araf-ds/core"
import { PlusIcon, ArrowRightIcon } from "@araf-ds/core/icons"

// Leading icon
<Button iconLeading={PlusIcon}>New item</Button>

// Trailing icon
<Button iconTrailing={ArrowRightIcon}>Continue</Button>

// Icon only — aria-label required
<Button iconLeading={PlusIcon} aria-label="Add new item" />

// Internal navigation
<Button href="/dashboard">Go to dashboard</Button>

// External link
<Button href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open docs
</Button>