Default
Secondary
Destructive
Outline
Ghost
Link Button
Small Button
Default Size
Large Button
Small Secondary
Default Destructive
Large Outline
Add Item
Delete
Download
Settings
Back
Next
Normal
Processing...
Success!
Error!
Disabled
Small Loading
Default Loading
Large Loading
{
const output = document.querySelector('#click-output');
if (output) {
output.textContent = `Clicked: Default button at ${new Date().toLocaleTimeString()}`;
}
}}
>
Click Me
{
const output = document.querySelector('#click-output');
if (output) {
output.textContent = `Clicked: Secondary button with data: ${e.detail.data}`;
}
}}
>
Click with Data
{
const output = document.querySelector('#click-output');
if (output) {
output.textContent = 'Processing...';
await new Promise(resolve => setTimeout(resolve, 2000));
output.textContent = 'Action completed!';
}
}}
>
Async Action
Click a button to see the result...
{
const output = document.querySelector('#form-output');
if (output) {
output.innerHTML = 'Form submitted with data:
' +
JSON.stringify(e.detail.data, null, 2);
}
}}>
Save Draft
Cancel
Submit Form
Submit the form to see the data...
Normal → Default
Highlighted → Destructive
Discreet → Outline
Big → Large Size
These legacy type values are maintained for backward compatibility but we recommend using the new variant system.
Action Group
Save Changes
Discard
Help
Danger Zone
Delete Account
Archive Data
Not Available
Code Example:
<dees-button type="default" size="sm" @clicked="\${handleClick}">
<dees-icon iconFA="faSave"></dees-icon>
Save Changes
</dees-button>