Button
Interactive UI components used to trigger actions
Source ↗️ Report Issue ↗️A fundamental element in web and application interfaces for initiating commands, submitting forms, and navigating between pages or sections. Facilitate user interactions, guide user behavior, and enhance the functionality and usability of your application with Button
components. Button
components have the following built-in themes:
Buttons with Icons
You can also pass the Icon
component or your own icons to the Button
component to render them with icons:
Interactive Buttons
To make a button interactive, you can use the onClick
prop for Svelte/React Button
components. For Astro, use the className
prop to assign a custom class name to the element that you can target with document.querySelector
, and add a click event listener using the native addEventListener
method:
API
button
and a
HTML tag attributes on the Button
component along with the above-defined props. Prop | Purpose |
---|---|
theme | Sets the theme of the button. Defaults to null . |
href | Attach a link to the button to make it work like an anchor element. |
className | Pass additional CSS classes for the button. |
Svelte & React Prop | Purpose |
---|---|
onClick | Attach on-click event listeners. |
Request improvement for this page