Button

Displays a button

<button>Click Me</button>

Import

@import "@webtui/css/components/button.css";

To add box borders to button, import the Box Utility stylesheet (optional)

@import "@webtui/css/utils/box.css";

Usage

<button>button</button>

Apply is-="button" to any HTML element to style it as a button

<div is-="button">div with button style</div>

Examples

Variants

<button variant-="background0">background0</button>
<button variant-="background1">background1</button>
<button variant-="background2">background2</button>
<button variant-="background3">background3</button>
<button variant-="foreground0">foreground0</button>
<button variant-="foreground1">foreground1</button>
<button variant-="foreground2">foreground2</button>

Available variants match the base theme colors

Box Borders

Requires the Box Utility

<button box-="round">Round</button>
<button box-="square">Square</button>
<button box-="double">Double</button>

Sizes

<button>Default</button>
<button size-="small">Small</button>
<button size-="large">Large</button>

disabled

<button disabled>Disabled</button>

Reference

Properties

• --button-primary: The primary color of the button
• --button-secondary: The secondary color of the button

button {
    --button-primary: black;
    --button-secondary: green;
}

Buttons automatically switch between --button-primary and --button-secondary based on whether box- is applied or not

Extending

To extend the Button stylesheet, define a CSS rule on the components layer

@layer components {
    button, [is-~="button"] {
        &[variant-="red"] {
            --button-primary: red;
            --button-secondary: white;
        }

        /* ... */
    }
}

Scope

button, [is-~="button"] { /* ... */ }