Free Astro Components

The button component is a versatile UI element for triggering actions or navigating through your application. Below are the available configurations and usage examples.

Import

To use the button component, first import it into your project:

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

Usage

To button component can be easily added to your project. Below are various use cases.

Basic Usage

Disabled

To disable the button, use the disabled prop.

Sizes

The component supports two sizes: medium and small.

Variants

Choose from four visual variants to match different design contexts: 'primary' | 'secondary' | 'dark' | 'light'.

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

<Button label='Button primary' variant='primary' />
<Button label='Button secondary' variant='secondary' />
<Button label='Button dark' variant='dark' />
<Button label='Button light' variant='light' />

With Icon

You can add an icon to the button, either on the left or right side of the label.

Icon Only

For an icon-only button, omit the label prop.

Custom Styles

The button component offers various CSS variables that you can customize to match your design needs. Below are the available variables and an example of how to use them:

Available Variables

--ac-btn-border-radius
--ac-btn-font-weight
--ac-btn-gap
--ac-btn-icon-medium-size
--ac-btn-icon-small-size
--ac-btn-medium-font-size
--ac-btn-medium-height
--ac-btn-medium-icon-size
--ac-btn-medium-padding
--ac-btn-small-font-size
--ac-btn-small-height
--ac-btn-small-icon-size
--ac-btn-small-padding

Example Customization

To customize the button styles, you can override these variables in your CSS:

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

<Button label='Click me' class='custom-button' />

<style>
/* Example of custom button styles */
.custom-button {
  --ac-btn-border-radius: 999px;
  --ac-btn-font-weight: 600;
  border-width: 0;
  background-image: linear-gradient(
    90deg,
    rgb(var(--ac-primary)) 0%,
    rgb(var(--ac-secondary)) 100%
  );
}
</style>

Props

Attribute	Type	Description	Default
label	`string`	The text displayed on the button	-
size	`small \| medium`	The size of the button	`medium`
variant	`primary \| secondary \| dark \| light`	The visual variant of the button	`primary`
icon	`string`	The name of the icon to display on the button from the available icon list.	-
iconPosition	`left \| right`	The position of the icon relative to the label	`right`
class	`string`	CSS class for custom styling.	-
other	`any`	Any other props will be passed to the `button` element	-

Accessibility

Keyboard Accessibility: Ensure that all buttons are reachable and operable using a keyboard. Focus should be clearly visible, and buttons should respond to keyboard events.
ARIA Attributes: Use appropriate ARIA roles and attributes to convey the button's purpose and state to assistive technologies.
Visual Clarity: Buttons should have sufficient contrast against their background to be easily distinguishable.