Button

Interactive element for triggering actions. Supports various styles, sizes, and states.

Installation

Import

import { Button } from '@svelte-atoms/core/button';

Preset Configuration

Customize the button appearance using presets

You can customize the default styles for Button components by defining presets in your configuration:

Examples

Explore different button variations and use cases

Basic Button

Simple button with default styling

Code

<script lang="ts">
  import { Button } from '@svelte-atoms/core/button';
</script>

<Button>Click me</Button>

Button Variants

Different visual styles for various contexts

Code

<Button class="bg-primary text-white hover:bg-primary/90">
  Primary Button
</Button>

<Button class="bg-secondary text-white hover:bg-secondary/90">
  Secondary Button
</Button>

<Button class="border border-border hover:bg-muted">
  Outline Button
</Button>

Button Sizes

Different sizes for various use cases

Code

<Button class="px-3 py-1.5 text-sm">Small</Button>
<Button class="px-4 py-2">Medium</Button>
<Button class="px-6 py-3 text-lg">Large</Button>

Disabled State

Disabled buttons are non-interactive

Code

<Button disabled>Disabled Button</Button>

API Reference

The Button component accepts all standard HTML button attributes, custom props, and preset variants in addition to the props listed below.

Prop

Type

Default

Description

class

string

Additional CSS classes to apply

children

Snippet

Content to render inside the button

disabled

boolean

false

Whether the button is disabled

type

'button' | 'submit' | 'reset'

'button'

Button type attribute

onclick

function

Click event handler

...presetProps

string

Any other preset props (variant, size, etc.)

...props

HTMLButtonAttributes

Any other HTML button attributes (aria-*, data-*, etc.)

Accessibility

Built-in Accessibility Features

• Proper semantic button element with role
• Keyboard navigation support (Enter and Space keys)
• Focus management with visible focus indicators
• Screen reader compatible with proper ARIA attributes
• Disabled state handling with aria-disabled
• Clear visual feedback for all interactive states

Back to Components

Next: Checkbox