Button

Interactive UI components used to trigger actions

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

---
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>

<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>

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.

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.

<- Breadcrumb Card ->

Request improvement for this page