Search documentation v0.6.1

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:

Preview
How to use Buttons in Astro
---
import { Button } from 'webcoreui/astro'
---
<Button>Primary</Button>
<Button theme="secondary">Secondary</Button>
<Button theme="flat">Flat</Button>
<Button theme="outline">Outline</Button>
<Button theme="info">Info</Button>
<Button theme="success">Success</Button>
<Button theme="warning">Warning</Button>
<Button theme="alert">Alert</Button>
How to use Buttons in Svelte
<script>
import { Button } from 'webcoreui/svelte'
</script>
<Button>Primary</Button>
<Button theme="secondary">Secondary</Button>
<Button theme="flat">Flat</Button>
<Button theme="outline">Outline</Button>
<Button theme="info">Info</Button>
<Button theme="success">Success</Button>
<Button theme="warning">Warning</Button>
<Button theme="alert">Alert</Button>
How to use Buttons in React
import React from 'react'
import { Button } from 'webcoreui/react'
const Component = () => (
<React.Fragment>
<Button>Primary</Button>
<Button theme="secondary">Secondary</Button>
<Button theme="flat">Flat</Button>
<Button theme="outline">Outline</Button>
<Button theme="info">Info</Button>
<Button theme="success">Success</Button>
<Button theme="warning">Warning</Button>
<Button theme="alert">Alert</Button>
</React.Fragment>
)
export default Component

Buttons with Icons

You can also pass the Icon component or your own icons to the Button component to render them with icons:

<Button theme="secondary">
<Icon type="github" size={15} /> Github
</Button>
<Button theme="info">
<Icon type="info" size={15} /> Info
</Button>
<Button theme="success">
<Icon type="circle-check" size={15} /> Success
</Button>
<Button theme="warning">
<Icon type="warning" size={15} /> Warning
</Button>
<Button theme="alert">
<Icon type="alert" size={15} /> Alert
</Button>
Icon colors will always use the color of the text of the button.

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:

---
import { Button } from 'webcoreui/astro'
---
<Button className="button">Click me</Button>
<script>
document.querySelector('.button').addEventListener('click', () => console.log('clicked'))
</script>
<script>
import { Button } from 'webcoreui/svelte'
</script>
<Button onClick={() => console.log('clicked')}>Click me</Button>
import React from 'react'
import { Button } from 'webcoreui/react'
const Component = () => (
<Button onClick={() => console.log('clicked')}>Click me</Button>
)
export default Component

API

type ButtonProps = {
theme?: 'secondary'
| 'outline'
| 'flat'
| 'info'
| 'success'
| 'warning'
| 'alert'
href?: string
className?: string
}
type SvelteButtonProps = {
onClick?: MouseEventHandler<HTMLButtonElement>
} & ButtonProps
type ReactButtonProps = {
onClick?: React.MouseEventHandler<HTMLButtonElement>
} & ButtonProps
You can use existing button and a HTML tag attributes on the Button component along with the above-defined props.
PropPurpose
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 PropPurpose
onClick Attach on-click event listeners.

Request improvement for this page