Button generator
Every Lightning app leans on buttons for save, cancel, delete and next-step actions. Instead of hand-tuning SLDS overrides on every project, dial in color, radius, shadow, hover and animation here and take the finished lightning-button markup with you.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-button
variant="brand"
label="Save Record"
title="Save Record"
onclick={handleClick}
class="studio-button"
></lightning-button>
</template>Design tips for buttons
- Use the "brand-outline" variant for secondary actions next to a solid primary button.
- Keep hover motion under 200ms so the button still feels responsive on record pages.
- Pair a destructive variant with a red accent and a subtle shake animation for delete confirmations.
Related components
Components developers commonly compare against or pair with Button.