Button

A clickable element that triggers an action or event

Variants

Different visual styles for various contexts

Code Svelte

1
2<script lang="ts">
3	import { Button } from "@kareyes/aether";
4</script>
5
6<div class="flex flex-wrap gap-4">
7	<Button variant="default" text="Default" />
8	<Button variant="destructive" text="Destructive" />
9	<Button variant="outline" text="Outline" />
10	<Button variant="secondary" text="Secondary" />
11	<Button variant="flat" text="Flat" />
12	<Button variant="bordered" text="Bordered" />
13	<Button variant="ghost" text="Ghost" />
14	<Button variant="link" text="Link" />
15</div>

Sizes

Three size options to fit your design

Code Svelte

1
2<script lang="ts">
3	import { Button } from "@kareyes/aether";
4</script>
5
6<div class="flex flex-wrap items-center gap-4">
7	<Button size="sm" text="Small" />
8	<Button size="default" text="Default" />
9	<Button size="lg" text="Large" />
10</div>

States

Different button states and interactions

Disabled

Loading State

Code Svelte

1
2<script lang="ts">
3	import { Button } from "@kareyes/aether";
4</script>
5
6<div class="flex flex-wrap gap-4">
7	<Button text="Disabled Default" disabled />
8	<Button variant="outline" text="Disabled Outline" disabled />
9	<Button variant="destructive" text="Disabled Destructive" disabled />
10</div>

With Icons

Buttons can contain custom content using slots

Code Svelte

1
2<script lang="ts">
3	import { Button } from "@kareyes/aether";
4	import { PlusIcon, SaveIcon, DownloadIcon } from "@kareyes/aether/icons";
5</script>
6
7<div class="flex flex-wrap gap-4">
8	<Button icon={PlusIcon} text="Add Item" />
9	<Button variant="outline" text="Save Changes" icon={SaveIcon} />
10	<Button variant="secondary" text="Download" icon={DownloadIcon} />
11</div>

Interactive Demo

Click the button to see it in action

Clicks: 0

Full Width

Buttons can span the full width of their container

Code Svelte

1
2<script lang="ts">
3	import { Button } from "@kareyes/aether";
4</script>
5
6<div class="space-y-3">
7	<Button text="Full Width Button" class="w-full" />
8	<Button variant="outline" text="Full Width Outline" class="w-full" />
9</div>

Button Groups

Multiple buttons working together

Action Group

Navigation Group

Toolbar

Code Svelte

1
2<script lang="ts">
3	import { Button, Separator } from "@kareyes/aether";
4</script>
5
6<div class="space-y-6">
7	<!-- Action Group -->
8	<div>
9		<p class="text-sm font-medium mb-3">Action Group</p>
10		<div class="flex gap-2">
11			<Button variant="outline" text="Cancel" />
12			<Button text="Save" />
13		</div>
14	</div>
15
16	<Separator />
17
18	<!-- Navigation Group -->
19	<div>
20		<p class="text-sm font-medium mb-3">Navigation Group</p>
21		<div class="flex gap-2">
22			<Button variant="outline" text="Previous" />
23			<Button variant="outline" text="1" />
24			<Button variant="default" text="2" />
25			<Button variant="outline" text="3" />
26			<Button variant="outline" text="Next" />
27		</div>
28	</div>
29</div>

Common Use Cases

Real-world button usage scenarios

Form Actions

Delete Confirmation

Are you sure you want to delete this item?

Social Actions

Call to Action

Code Svelte

1
2<script lang="ts">
3	import { Button } from "@kareyes/aether";
4</script>
5
6<div class="grid gap-6 md:grid-cols-2">
7	<!-- Form Actions -->
8	<div class="space-y-3">
9		<p class="font-medium">Form Actions</p>
10		<div class="flex gap-2 justify-end">
11			<Button variant="outline" text="Cancel" />
12			<Button variant="default" text="Submit" />
13		</div>
14	</div>
15
16	<!-- Delete Confirmation -->
17	<div class="space-y-3">
18		<p class="font-medium">Delete Confirmation</p>
19		<div class="flex gap-2">
20			<Button variant="outline" text="Cancel" />
21			<Button variant="destructive" text="Delete" />
22		</div>
23	</div>
24
25	<!-- Social Actions -->
26	<div class="space-y-3">
27		<p class="font-medium">Social Actions</p>
28		<div class="flex flex-wrap gap-2">
29			<Button variant="default" text="Follow" />
30			<Button variant="outline" text="Message" />
31			<Button variant="ghost" text="Share" />
32		</div>
33	</div>
34
35	<!-- Call to Action -->
36	<div class="space-y-3 text-center">
37		<p class="font-medium">Call to Action</p>
38		<Button text="Get Started" size="lg" class="w-full" />
39		<Button variant="link" text="Learn more" class="w-full text-sm" />
40	</div>
41</div>

Basic Usage

<script lang="ts">
  import { Button } from "@kareyes/aether";
</script>

<Button>Click me</Button>

With Primitives Import

<script lang="ts">
  import { ButtonPrimitives } from "@kareyes/aether";
</script>

<ButtonPrimitives.Root>Click me</ButtonPrimitives.Root>

Button with Text Prop

<Button text="Click me" />

Button with Icon

<script lang="ts">
  import { Button } from "@kareyes/aether";
  import PlusIcon from "@lucide/svelte/icons/plus";
</script>

<Button text="Add Item" icon={PlusIcon} />

Props Reference

Prop	Type	Default	Description
`text`	`string`	`undefined`	Text content to display
`icon`	`ComponentType`	`undefined`	Lucide Svelte icon component
`iconPosition`	`"left" \| "right"`	`"left"`	Position of the icon relative to text
`loading`	`boolean`	`false`	Show loading spinner and disable button
`loadingText`	`string`	`"Loading..."`	Text to show during loading state
`variant`	`ButtonVariant`	`"default"`	Button style variant
`size`	`ButtonSize`	`"default"`	Button size
`disabled`	`boolean`	`false`	Disable the button
`href`	`string`	`undefined`	Makes button render as link
`class`	`string`	-	Additional CSS classes

Button Variants

Variant	Description
`default`	Primary button with solid background
`secondary`	Secondary button with muted background
`outline`	Button with border, transparent background
`ghost`	Minimal button with no background
`destructive`	Red button for destructive actions
`bordered`	Button with emphasized border
`flat`	Button with flat appearance
`link`	Button styled as a link

Button Sizes

Size	Description
`sm`	Small button
`default`	Standard button size
`lg`	Large button
`icon`	Square button for icon-only

Variants

All Variants

<Button text="Default" />
<Button text="Secondary" variant="secondary" />
<Button text="Outline" variant="outline" />
<Button text="Ghost" variant="ghost" />
<Button text="Destructive" variant="destructive" />
<Button text="Bordered" variant="bordered" />
<Button text="Flat" variant="flat" />
<Button text="Link" variant="link" />

Different Sizes

<Button text="Small" size="sm" />
<Button text="Default" size="default" />
<Button text="Large" size="lg" />

Examples

Icon Position

<script lang="ts">
  import { Button } from "@kareyes/aether";
  import DownloadIcon from "@lucide/svelte/icons/download";
</script>

<!-- Icon on the left (default) -->
<Button text="Download" icon={DownloadIcon} />

<!-- Icon on the right -->
<Button text="Download" icon={DownloadIcon} iconPosition="right" />

Icon Only Button

<script lang="ts">
  import { Button } from "@kareyes/aether";
  import SaveIcon from "@lucide/svelte/icons/save";
</script>

<Button icon={SaveIcon} size="icon" />

Loading States

<script lang="ts">
  import { Button } from "@kareyes/aether";
  import SaveIcon from "@lucide/svelte/icons/save";

  let saving = $state(false);

  const handleSave = async () => {
    saving = true;
    try {
      await new Promise(resolve => setTimeout(resolve, 2000));
      console.log('Saved!');
    } finally {
      saving = false;
    }
  };
</script>

<Button
  text="Save Changes"
  icon={SaveIcon}
  loading={saving}
  loadingText="Saving..."
  onclick={handleSave}
/>

Button as Link

<Button text="Go to Docs" href="/docs" />

Button with Custom Content

The component maintains backwards compatibility with children content:

<script lang="ts">
  import { Button } from "@kareyes/aether";
  import PlusIcon from "@lucide/svelte/icons/plus";
</script>

<Button variant="destructive">
  <PlusIcon class="size-4 mr-2" />
  Custom Content
</Button>

Button Group Example

<script lang="ts">
  import { Button, ButtonGroup } from "@kareyes/aether";
</script>

<ButtonGroup>
  <Button text="Left" />
  <Button text="Center" />
  <Button text="Right" />
</ButtonGroup>

Loading Behavior

When loading={true}:

Button becomes disabled
Icon is replaced with a spinning loader
Text changes to loadingText if provided
Original icon and text are restored when loading ends

Accessibility

The Button component follows accessibility best practices:

Keyboard Navigation

Key	Action
`Enter` / `Space`	Activate the button
`Tab`	Move focus to the button

ARIA Attributes

aria-disabled is set when button is disabled or loading
aria-busy is set when button is in loading state
Proper focus indicators for keyboard users

Best Practices

Use descriptive text: Button text should clearly indicate the action
Provide loading feedback: Use loadingText to inform users of ongoing actions
Icon accessibility: Icon-only buttons should have aria-label for screen readers
Color contrast: All variants meet WCAG color contrast requirements