Button | Design System Docs

Desencadena una acción o un evento, como enviar un formulario o mostrar un diálogo.

Variante: Primary (Por defecto)

Code Snippet

<Button>
  Primary Button
</Button>

Variante: Secondary

Code Snippet

<Button variant="secondary">
  Secondary Button
</Button>

Estados: Disabled

Code Snippet

<Button disabled>
  Disabled Button
</Button>

Botón como Enlace (Polimórfico)

El componente Astro acepta la propiedad as. Puedes usarlo como un enlace pasando as="a" y sus respectivos atributos como href. Gracias al tipado avanzado, si usas as="a", TypeScript te sugerirá el atributo href.

Variante: Enlace

Ver Instalación

Code Snippet

<Button as="a" href="/docs/installation" variant="outline">
  Ver Instalación
</Button>

Uso en React (ReactButton)

Si necesitas interactividad del lado del cliente en un componente React (por ejemplo, usar onClick), Astro no permite inyectar componentes nativos dentro de React. Para ello, el sistema de diseño exporta una versión exacta hecha en React llamada ReactButton.

import { ReactButton as Button } from '@rubenvillar/design-system-astro';

export default function LoginForm() {
  return (
    <Button onClick={() => alert('Hola')} className="w-full">
      Iniciar Sesión
    </Button>
  );
}