Saltearse al contenido

Button

Esta página aún no está disponible en tu idioma.

A button component with support for different colors, sizes and states out of the box. You can also customize it to your needs!

Using the button component is easy. Check out the example below:

You can disable the button component via the disabled attribute:

The button component supports three different sizes out of the box:

There is five default colorways that can be used right away:

  • Default
  • Primary
  • Success
  • Warning
  • Danger

In addition to colors, the button component can be displayed in three different variants:

Thanks to Astro’s Polymorphic type, you can change the button’s parent component into whatever HTML tag you need it to be! Here’s an example where the button is an <a> tag instead of a <button>:

As mentioned earlier, you can apply your custom styles to the button component! Here’s a gradient button to show you how it’s done: