Button

Introduction

The Button component provides a versatile and accessible way to trigger actions throughout your application. It supports multiple variants, sizes, types, and animations while maintaining excellent accessibility standards. Built with semantic HTML and proper ARIA attributes, it adapts seamlessly to both light and dark modes.

Semantic HTML

The Button component always renders as a proper <button> element with correct type attributes, ensuring proper form behavior and accessibility.

When to use

Use the Button component when you need to:

• Trigger actions (submit forms, navigate, open modals)
• Provide primary and secondary call-to-action elements
• Create interactive elements with proper keyboard support
• Display loading or processing states
• Group related actions with consistent styling
• Add engaging hover animations to enhance user experience
• Ensure accessibility compliance in interactive elements

Quick example

Default Primary Secondary Info Success Warning Error

Small Medium Large

Outlined

Hover boop

Nudge nudge

Pulsing

Try hovering over the rocket button to see the animation effect!

Usage

Learn how to implement the Button component in your project, from basic usage to advanced configurations with animations.

Basic buttons

---
import { Button } from 'accessible-astro-components'
---

<Button>Default Button</Button>
<Button type="primary">Primary Action</Button>
<Button type="secondary">Secondary Action</Button>

Button variants

<!-- Filled buttons (default) -->
<Button type="primary">Filled Primary</Button>
<Button type="success">Filled Success</Button>

<!-- Outlined buttons -->
<Button variant="outlined" type="primary">Outlined Primary</Button>
<Button variant="outlined" type="error">Outlined Error</Button>

Button sizes

<Button size="sm">Small Button</Button>
<Button size="md">Medium Button</Button>
<Button size="lg">Large Button</Button>

Button types and states

<!-- Different semantic types -->
<Button type="info">Information</Button>
<Button type="success">Success</Button>
<Button type="warning">Warning</Button>
<Button type="error">Danger</Button>

<!-- Button states -->
<Button disabled>Disabled Button</Button>
<Button htmlType="submit">Submit Form</Button>
<Button htmlType="reset">Reset Form</Button>

Buttons with icons

---
import { Button } from 'accessible-astro-components'
import { Icon } from 'astro-icon/components'
---

<!-- Icon with text -->
<Button type="primary">
  <Icon name="ion:save" size="1rem" />
  Save Changes
</Button>

<!-- Icon only (provide aria-label) -->
<Button
  type="info"
  ariaLabel="Search"
  isCircular
>
  <Icon name="ion:search" size="1rem" />
</Button>

Icon-only buttons

When using icon-only buttons, always provide the ariaLabel prop to ensure screen reader users understand the button’s purpose.

Animated buttons

Available animations are ‘rotate’, ‘boop’, ‘bouncing’, ‘nudge’.

<!-- Hover animations -->
<Button
  type="primary"
  animateOnHover
  animationType="boop"
>
  <Icon name="ion:heart" size="1rem" />
  Like
</Button>

<Button
  type="info"
  animateOnHover
  animationType="rotate"
  animationIntensity={8}
>
  <Icon name="ion:refresh" size="1rem" />
  Refresh
</Button>

<!-- Pulsing button to draw attention -->
<Button
  type="success"
  pulse
>
  New Feature!
</Button>

Form buttons

<form>
  <Button htmlType="submit" type="primary">
    Submit Form
  </Button>

  <Button htmlType="reset" variant="outlined">
    Reset
  </Button>

  <Button htmlType="button" onclick="handleCancel()">
    Cancel
  </Button>
</form>

Props

Configure the Button component using these available props to customize its behavior and appearance.

Prop	Type	Default	Description
htmlType	'button' | 'submit' | 'reset'	'button'	The HTML button type attribute
variant	'filled' | 'outlined'	'filled'	The visual variant of the button
type	'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'	'default'	The type affecting color scheme
size	'sm' | 'md' | 'lg'	'md'	The size of the button
disabled	boolean	false	Whether the button is disabled
animateOnHover	boolean	false	Whether to animate icons on hover
animationType	'rotate' | 'boop' | 'bouncing' | 'nudge' | 'none'	'boop'	Type of animation to apply on hover
animationIntensity	number	5	Animation intensity (1-10)
pulse	boolean	false	Whether to apply a pulsating animation
ariaLabel	string	undefined	Accessible label for screen readers
ariaDescribedby	string	undefined	ID of element describing the button
id	string	undefined	The id attribute
class	string	undefined	Additional CSS classes to apply

Animation intensity

Animation intensity values are clamped between 1-10, where 1 is subtle and 10 is more dramatic. The default value of 5 provides a balanced animation that works well in most contexts.

Accessibility

Accessibility is built into the core of this component through semantic HTML elements and proper ARIA attributes. The Button component ensures excellent accessibility:

• Uses semantic <button> element with proper type attributes
• Supports all standard button behaviors (click, enter, space)
• Maintains proper focus states with clear visual indicators
• High contrast color combinations for all variants
• Automatic light/dark mode adaptation
• Respects user’s reduced-motion preferences for animations
• Proper disabled state handling
• Support for ARIA attributes (aria-label, aria-describedby)
• Text underline animations provide additional interaction feedback

Focus management

The component includes a subtle underline animation on hover and focus, providing clear feedback about the interactive state without relying solely on color changes.

Animation preferences

All animations respect the user’s prefers-reduced-motion setting, automatically disabling motion for users who have requested reduced motion in their system preferences.

Styling

Make the Button component your own with custom styling while maintaining its accessibility features.

Accessibility considerations

When applying custom styles, ensure you maintain sufficient color contrast ratios (4.5:1 for normal text, 3:1 for large text) and don’t remove focus indicators.

Custom CSS

/* Option 1: Using :global() in your style block */
<style>
  :global(.button) {
    font-weight: 600;
    letter-spacing: 0.025em;
    border-radius: 0.75rem;
  }

  :global(.button.type-primary) {
    border-color: light-dark(hsl(220 100% 50%), hsl(220 100% 60%));
    background-color: light-dark(hsl(220 100% 50%), hsl(220 100% 60%));
    color: white;
  }

  :global(.button:hover) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px hsl(0 0% 0% / 0.15);
  }

  :global(.button:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* Custom animation keyframes */
  @media (prefers-reduced-motion: no-preference) {
    :global(.button.animation-pulse) {
      animation: custom-pulse 2s infinite;
    }
  }

  @keyframes custom-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }
</style>

/* Option 2: Using is:global on the style tag */
<style is:global>
  .button {
    font-weight: 600;
    letter-spacing: 0.025em;
    border-radius: 0.75rem;
  }

  .button.type-primary {
    border-color: light-dark(hsl(220 100% 50%), hsl(220 100% 60%));
    background-color: light-dark(hsl(220 100% 50%), hsl(220 100% 60%));
    color: white;
  }
</style>

Tailwind Classes

<Button
  class="font-semibold tracking-wide rounded-lg shadow-lg"
  type="primary"
>
  Custom Styled Button
</Button>

<!-- With responsive sizing -->
<Button
  class="px-6 py-3 md:px-8 md:py-4 text-sm md:text-base"
  size="lg"
>
  Responsive Button
</Button>

Style scoping

Astro components use scoped styles by default. To override component styles, you’ll need to use either :global() selectors or the is:global directive on your style tag.

Interactive examples

See the Button component in action with these practical examples demonstrating different variants, animations, and styling options.

Button variants showcase

Filled

Primary

Outlined

Primary

Success

Success

Warning

Warning

Error

Error

Animated buttons

Boop

Rotate

Bounce

Pulse

Hover over the buttons to see different animation effects. The pulse button automatically animates.

Form actions

Save

Reset

Cancel

Form buttons with proper HTML types for semantic form behavior.

Size variations

Small

Medium

Large

Icon-only buttons

Icon-only buttons with proper accessibility labels. Hover to see animations.

Related components

• Link: For navigation and external links with button styling
• Badge: For compact interactive elements and status indicators
• Modal: Often used together for confirm/cancel actions