Gallery / Demo Components / Button / Dialog Action Layout Gallery / / Dialog Action Layout
Demo Components / Button /
Documentation
Variant

Dialog Action Layout

Demonstrates Smart Hybrid canvas template wrapping the button in a realistic dialog mockup.

Preview

{% button "Confirm & Proceed" %}

Parameters

Name Type Required Default Choices Description
label str Yes — — The button label.
variant str No primary primary , secondary , danger Variant modifier
disabled bool No — — Renders the button as disabled.
Sandbox
{% button "Click Me" variant="primary" %}

<div style="max-width: 400px; margin: 2rem auto; padding: 1.5rem; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); font-family: sans-serif;">
    <h4 style="margin-top: 0; color: #1e293b;">Confirm Transaction</h4>
    <p style="color: #64748b; font-size: 14px;">Are you sure you want to proceed with this operation? This step will debit your account.</p>
    <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 1rem;">
        <button type="button" style="padding: 6px 12px; background: transparent; border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer;">Cancel</button>
        <button class="btn primary" >
  Confirm &amp; Proceed
</button>

    </div>
</div>