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
type
"button" | "submit" | "reset" | undefined
'button'
Button type attribute for form submission behavior
children
Snippet<[]> | undefined
undefined
Content to render inside the button
...atomProps
HtmlAtomProps
-
All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.
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