Astra UI

Getting Started

Components

Button

Buttons are interactive elements that allow users to trigger actions with a single click or tap. They're a fundamental part of any user interface, guiding users through tasks and interactions.

Preview

Click me!

Variations

Variants

Primary Secondary Transparent Destructive

Sizes

Base Small Compact

Shapes

Default □ ○

Basic Usage

To use the Astra Button component, simply add the <astra-button> tag to your HTML: 

<astra-button>Click me!</astra-button>

Features

The Astra Button component offers various customization options:

Variants

Choose from different button styles using the variant attribute: 

<astra-button variant="primary">Primary</astra-button>
<astra-button variant="secondary">Secondary</astra-button>
<astra-button variant="transparent">Transparent</astra-button>
<astra-button variant="destructive">Destructive</astra-button>

Sizes

Adjust the button size with the size attribute: 

<astra-button size="base">Base</astra-button>
<astra-button size="small">Small</astra-button>
<astra-button size="compact">Compact</astra-button>

Shapes

Modify the button shape using the shape attribute: 

<astra-button shape="default">Default</astra-button>
<astra-button shape="square">Square</astra-button>
<astra-button shape="circle">Circle</astra-button>

Why Use Astra Button?

  • Simplicity: Easy to use with minimal setup required.
  • Accessibility: Built-in support for keyboard navigation and ARIA attributes.
  • Customization: Multiple variants, sizes, and shapes available.
  • Responsive: Automatically adapts to light and dark color schemes.

Accessibility

The Astra Button component is designed with accessibility in mind:

  • It's keyboard accessible and can be activated using the Space or Enter keys.
  • The button has a visible focus indicator for keyboard navigation.
  • You can use the disabled attribute to disable the button when needed.

Fast Travel