<%# ds:allow deprecated-class — this preview documents the RETIRED outline variants so CDN consumers can still identify them; new work uses .tw-btn-soft-* (see the section note below) %> <div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Header / Introduction --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>BUTTON SYSTEM:</strong> Complete reference for all button variants and states<br> <strong>VARIANTS:</strong> Solid | Outline | Link | Sizes | States | Layout </p> <p class="tw:mb-0 tw:text-sm"> Buttons are the primary way users take actions in your application. Use semantic colors to convey intent (primary for main actions, danger for destructive actions, etc.). </p> </div> <!-- Section 1: Solid Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Solid Buttons</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Solid Buttons:</strong> High-emphasis buttons with colored backgrounds. Use for primary actions and important calls-to-action. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-primary" type="button">Primary</button> <button class="tw-btn tw-btn-secondary" type="button">Secondary</button> <button class="tw-btn tw-btn-success" type="button">Success</button> <button class="tw-btn tw-btn-danger" type="button">Danger</button> <button class="tw-btn tw-btn-warning" type="button">Warning</button> <button class="tw-btn tw-btn-info" type="button">Info</button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-primary"&gt;Primary&lt;/button&gt;</code> </div> </div> <!-- Section 2: Outline Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Outline Buttons <span class="tw-badge tw-badge-danger-subtle tw-badge-sm">Retired</span></h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Outline Buttons — RETIRED 2026-08-11. Do not use in new work.</strong> Kept here, and in the CSS, only so CDN consumers can identify what they already have. Use the <code>.tw-btn-soft-*</code> tier instead — it is the same medium-emphasis step and every mapping is contrast-checked: <code>outline-primary</code> → <code>soft-primary</code>, and the same for secondary, success, danger, warning and info. <code>bin/ds validate</code> fails on any new outline usage. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-outline-primary" type="button">Primary</button> <button class="tw-btn tw-btn-outline-secondary" type="button">Secondary</button> <button class="tw-btn tw-btn-outline-success" type="button">Success</button> <button class="tw-btn tw-btn-outline-danger" type="button">Danger</button> <button class="tw-btn tw-btn-outline-warning" type="button">Warning</button> <button class="tw-btn tw-btn-outline-info" type="button">Info</button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-outline-primary"&gt;Primary&lt;/button&gt;</code> </div> </div> <!-- Section 3: Tertiary Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Tertiary Buttons</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Tertiary Buttons:</strong> Low-emphasis buttons with transparent background. Use for tertiary actions, supplementary options, or when you need minimal visual weight. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-tertiary" type="button">Tertiary Button</button> <button class="tw-btn tw-btn-tertiary" type="button">Another Option</button> <button class="tw-btn tw-btn-tertiary" type="button">Learn More</button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-tertiary"&gt;Tertiary Button&lt;/button&gt;</code> </div> </div> <!-- Section 4: Button Sizes --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Button Sizes</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Sizes:</strong> Three size options to match your UI density needs. Default size works for most cases. </p> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-primary tw-btn-lg" type="button">Large button</button> <button class="tw-btn tw-btn-primary" type="button">Default button</button> <button class="tw-btn tw-btn-primary tw-btn-sm" type="button">Small button</button> </div> <div class="tw:mt-4"> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-outline-secondary tw-btn-lg" type="button">Large outline</button> <button class="tw-btn tw-btn-outline-secondary" type="button">Default outline</button> <button class="tw-btn tw-btn-outline-secondary tw-btn-sm" type="button">Small outline</button> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-primary tw-btn-lg"&gt;Large&lt;/button&gt;</code><br> <code>&lt;button class="tw-btn tw-btn-primary tw-btn-sm"&gt;Small&lt;/button&gt;</code> </div> </div> <!-- Section 5: Icon Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Icon Buttons</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Icon Buttons:</strong> Buttons with Font Awesome Pro v6 icons. Use icons to reinforce meaning and improve scannability. Icons inherit the button's text size and color automatically. </p> </div> <div class="tw:space-y-6"> <!-- Icon + Text --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Icon + Text (Leading Icon)</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-primary" type="button"><i class="fa-solid fa-floppy-disk"></i> Save</button> <button class="tw-btn tw-btn-secondary" type="button"><i class="fa-solid fa-xmark"></i> Cancel</button> <button class="tw-btn tw-btn-success" type="button"><i class="fa-solid fa-check"></i> Confirm</button> <button class="tw-btn tw-btn-danger" type="button"><i class="fa-solid fa-trash"></i> Delete</button> </div> </div> <!-- Text + Icon (Trailing) --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Text + Icon (Trailing Icon)</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-primary" type="button">Next <i class="fa-solid fa-arrow-right"></i></button> <button class="tw-btn tw-btn-secondary" type="button">Download <i class="fa-solid fa-download"></i></button> <button class="tw-btn tw-btn-outline-primary" type="button">View Details <i class="fa-solid fa-chevron-right"></i></button> </div> </div> <!-- Icon-Only Buttons --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Icon-Only Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-primary tw-btn-icon" type="button" aria-label="Save"><i class="fa-solid fa-floppy-disk"></i></button> <button class="tw-btn tw-btn-secondary tw-btn-icon" type="button" aria-label="Settings"><i class="fa-solid fa-gear"></i></button> <button class="tw-btn tw-btn-success tw-btn-icon" type="button" aria-label="Add"><i class="fa-solid fa-plus"></i></button> <button class="tw-btn tw-btn-danger tw-btn-icon" type="button" aria-label="Delete"><i class="fa-solid fa-trash"></i></button> <button class="tw-btn tw-btn-outline-primary tw-btn-icon" type="button" aria-label="Edit"><i class="fa-solid fa-pen"></i></button> <button class="tw-btn tw-btn-outline-secondary tw-btn-icon" type="button" aria-label="More options"><i class="fa-solid fa-ellipsis-vertical"></i></button> </div> </div> <!-- Icon Button Sizes --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Icon Button Sizes</p> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-primary tw-btn-icon tw-btn-lg" type="button" aria-label="Large edit"><i class="fa-solid fa-pen"></i></button> <button class="tw-btn tw-btn-primary tw-btn-icon" type="button" aria-label="Default edit"><i class="fa-solid fa-pen"></i></button> <button class="tw-btn tw-btn-primary tw-btn-icon tw-btn-sm" type="button" aria-label="Small edit"><i class="fa-solid fa-pen"></i></button> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:mt-3"> <button class="tw-btn tw-btn-outline-secondary tw-btn-icon tw-btn-lg" type="button" aria-label="Large settings"><i class="fa-solid fa-gear"></i></button> <button class="tw-btn tw-btn-outline-secondary tw-btn-icon" type="button" aria-label="Default settings"><i class="fa-solid fa-gear"></i></button> <button class="tw-btn tw-btn-outline-secondary tw-btn-icon tw-btn-sm" type="button" aria-label="Small settings"><i class="fa-solid fa-gear"></i></button> </div> </div> <!-- Icon Buttons with Text Sizes --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Icon + Text with Sizes</p> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-primary tw-btn-lg" type="button"><i class="fa-solid fa-floppy-disk"></i> Save Changes</button> <button class="tw-btn tw-btn-primary" type="button"><i class="fa-solid fa-floppy-disk"></i> Save Changes</button> <button class="tw-btn tw-btn-primary tw-btn-sm" type="button"><i class="fa-solid fa-floppy-disk"></i> Save</button> </div> </div> <!-- Common Icon Actions --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Common Icon Patterns</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-primary" type="button"><i class="fa-solid fa-plus"></i> Add New</button> <button class="tw-btn tw-btn-secondary" type="button"><i class="fa-solid fa-filter"></i> Filter</button> <button class="tw-btn tw-btn-outline-primary" type="button"><i class="fa-solid fa-magnifying-glass"></i> Search</button> <button class="tw-btn tw-btn-outline-secondary" type="button"><i class="fa-solid fa-arrow-up-from-bracket"></i> Export</button> <button class="tw-btn tw-btn-tertiary" type="button"><i class="fa-solid fa-rotate"></i> Refresh</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-primary"&gt;&lt;i class="fa-solid fa-check"&gt;&lt;/i&gt; Save&lt;/button&gt;</code><br> <code>&lt;button class="tw-btn tw-btn-primary tw-btn-icon" aria-label="Save"&gt;&lt;i class="fa-solid fa-floppy-disk"&gt;&lt;/i&gt;&lt;/button&gt;</code> </div> </div> <!-- Section 6: Disabled State --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Disabled State</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Disabled Buttons:</strong> Use the <code>disabled</code> attribute to indicate buttons that cannot be interacted with. Disabled buttons have reduced opacity and no hover effects. </p> </div> <div class="tw:space-y-4"> <div> <p class="tw:text-sm tw:font-semibold tw:mb-2">Disabled Solid Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-primary" type="button" disabled>Primary</button> <button class="tw-btn tw-btn-secondary" type="button" disabled>Secondary</button> <button class="tw-btn tw-btn-success" type="button" disabled>Success</button> <button class="tw-btn tw-btn-danger" type="button" disabled>Danger</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-2">Disabled Outline Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-outline-primary" type="button" disabled>Primary</button> <button class="tw-btn tw-btn-outline-secondary" type="button" disabled>Secondary</button> <button class="tw-btn tw-btn-outline-success" type="button" disabled>Success</button> <button class="tw-btn tw-btn-outline-danger" type="button" disabled>Danger</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-2">Disabled Tertiary Button</p> <button class="tw-btn tw-btn-tertiary" type="button" disabled>Disabled Tertiary</button> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-primary" disabled&gt;Disabled&lt;/button&gt;</code> </div> </div> <!-- Loading State --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Loading State</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Action in flight:</strong> add <code>.tw-btn-loading</code>, swap the label ("Save" → "Saving…"), and set <code>disabled</code> + <code>aria-busy="true"</code>. The spinner draws from the button's own text colour, so it works on every variant; the class overrides the disabled dim — a busy button reads <em>active</em>, not <em>unavailable</em>. </p> </div> <div class="tw:space-y-4"> <div> <p class="tw:text-sm tw:font-semibold tw:mb-2">Loading vs idle</p> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-primary tw-btn-loading" type="button" disabled aria-busy="true">Saving…</button> <button class="tw-btn tw-btn-primary" type="button">Save</button> <button class="tw-btn tw-btn-secondary tw-btn-loading" type="button" disabled aria-busy="true">Loading…</button> <button class="tw-btn tw-btn-danger tw-btn-loading" type="button" disabled aria-busy="true">Deleting…</button> <button class="tw-btn tw-btn-tertiary tw-btn-loading" type="button" disabled aria-busy="true">Refreshing…</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-2">Sizes</p> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-primary tw-btn-sm tw-btn-loading" type="button" disabled aria-busy="true">Saving…</button> <button class="tw-btn tw-btn-primary tw-btn-loading" type="button" disabled aria-busy="true">Saving…</button> <button class="tw-btn tw-btn-primary tw-btn-lg tw-btn-loading" type="button" disabled aria-busy="true">Saving…</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-primary tw-btn-loading" disabled aria-busy="true"&gt;Saving…&lt;/button&gt;</code> </div> </div> <!-- Section 6: Block Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Block Buttons (Full Width)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Block Buttons:</strong> Full-width buttons that span their container. Use for mobile interfaces, forms, or when you need a button to take up the entire available width. </p> </div> <div class="tw:space-y-3 tw:max-w-md"> <button class="tw-btn tw-btn-primary tw-btn-block" type="button">Block level button</button> <button class="tw-btn tw-btn-secondary tw-btn-block" type="button">Another block button</button> <button class="tw-btn tw-btn-outline-primary tw-btn-block" type="button">Block outline button</button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-primary tw-btn-block"&gt;Block button&lt;/button&gt;</code> </div> </div> <!-- Section: Heavy Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Heavy Buttons (Bold Text)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Heavy Buttons:</strong> Buttons with bold text for extra emphasis. Add <code>.tw-btn-heavy</code> to any button variant when you need the text to stand out more. </p> </div> <div class="tw:space-y-4"> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Solid Heavy Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-primary tw-btn-heavy" type="button">Primary Heavy</button> <button class="tw-btn tw-btn-secondary tw-btn-heavy" type="button">Secondary Heavy</button> <button class="tw-btn tw-btn-success tw-btn-heavy" type="button">Success Heavy</button> <button class="tw-btn tw-btn-danger tw-btn-heavy" type="button">Danger Heavy</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Outline Heavy Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-outline-primary tw-btn-heavy" type="button">Primary Heavy</button> <button class="tw-btn tw-btn-outline-secondary tw-btn-heavy" type="button">Secondary Heavy</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Comparison: Normal vs Heavy</p> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-primary" type="button">Normal Button</button> <button class="tw-btn tw-btn-primary tw-btn-heavy" type="button">Heavy Button</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-primary tw-btn-heavy"&gt;Heavy Button&lt;/button&gt;</code> </div> </div> <!-- Section: Multiline Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Multiline Buttons (Edge cases)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Multiline Buttons:</strong> Buttons with multiple text lines (2 lines optimal) to support extra context in constrained space. Add <code>.tw-btn-multiline</code> to any button variant when you need to display in 2 lines. </p> </div> <div class="tw:space-y-4"> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Solid Multiline Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-primary tw-btn-multiline" type="button">Support &<br>Feature Requests</button> <button class="tw-btn tw-btn-secondary tw-btn-multiline" type="button">Support &<br>Feature Requests</button> <button class="tw-btn tw-btn-success tw-btn-multiline" type="button">Support &<br>Feature Requests</button> <button class="tw-btn tw-btn-danger tw-btn-multiline" type="button">Support &<br>Feature Requests</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Outline Multiline Buttons</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-outline-primary tw-btn-multiline" type="button">Support &<br>Feature Requests</button> <button class="tw-btn tw-btn-outline-secondary tw-btn-multiline" type="button">Support &<br>Feature Requests</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Comparison: Normal vs Multiline</p> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Comparison: Multiline in different sizes</p> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:mb-3"> <button class="tw-btn tw-btn-primary tw-btn-multiline tw-btn-sm" type="button">Support &<br>Feature Requests</button> <button class="tw-btn tw-btn-primary tw-btn-sm" type="button">Small Button</button> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:mb-3"> <button class="tw-btn tw-btn-primary tw-btn-multiline" type="button">Support &<br>Feature Requests</button> <button class="tw-btn tw-btn-primary" type="button">Normal Button</button> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-primary tw-btn-multiline tw-btn-lg" type="button">Support &<br>Feature Requests</button> <button class="tw-btn tw-btn-primary tw-btn-lg" type="button">Large Button</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-primary tw-btn-multiline"&gt;Multiline&lt;br&gt;Button&lt;/button&gt;</code> </div> </div> <!-- Section 7: Usage Examples --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Common Usage Patterns</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Real-world examples:</strong> Typical button combinations you'll use in forms, dialogs, and interfaces. </p> </div> <div class="tw:space-y-6"> <!-- Form Actions --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Form Actions (Primary + Secondary)</p> <div class="tw:flex tw:gap-2"> <button class="tw-btn tw-btn-primary" type="submit">Save Changes</button> <button class="tw-btn tw-btn-secondary" type="button">Cancel</button> </div> </div> <!-- Destructive Action --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Destructive Action with Confirmation</p> <div class="tw:flex tw:gap-2"> <button class="tw-btn tw-btn-danger" type="button">Delete Account</button> <button class="tw-btn tw-btn-secondary" type="button">Nevermind</button> </div> </div> <!-- Call to Action --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Call to Action (CTA)</p> <div class="tw:flex tw:gap-2"> <button class="tw-btn tw-btn-success tw-btn-lg" type="button">Get Started</button> <button class="tw-btn tw-btn-tertiary" type="button">Learn More</button> </div> </div> <!-- Multiple Actions --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Multiple Actions</p> <div class="tw:flex tw:flex-wrap tw:gap-2"> <button class="tw-btn tw-btn-primary" type="button">Approve</button> <button class="tw-btn tw-btn-warning" type="button">Flag for Review</button> <button class="tw-btn tw-btn-outline-danger" type="button">Reject</button> <button class="tw-btn tw-btn-tertiary" type="button">View Details</button> </div> </div> </div> </div> <!-- Section 8: Button Groups --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Button Groups</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Button Groups:</strong> Group multiple buttons together with shared borders. Use for related actions or toggles like toolbar buttons or view switchers. </p> </div> <div class="tw:space-y-6"> <!-- Horizontal Button Group --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Horizontal Group</p> <div class="tw-btn-group"> <button class="tw-btn tw-btn-secondary" type="button">Left</button> <button class="tw-btn tw-btn-secondary" type="button">Middle</button> <button class="tw-btn tw-btn-secondary" type="button">Right</button> </div> </div> <!-- Solid Color Groups --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Solid Button Groups</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div class="tw-btn-group"> <button class="tw-btn tw-btn-primary" type="button">1</button> <button class="tw-btn tw-btn-primary" type="button">2</button> <button class="tw-btn tw-btn-primary" type="button">3</button> <button class="tw-btn tw-btn-primary" type="button">4</button> </div> <div class="tw-btn-group"> <button class="tw-btn tw-btn-success" type="button">5</button> <button class="tw-btn tw-btn-success" type="button">6</button> <button class="tw-btn tw-btn-success" type="button">7</button> </div> <div class="tw-btn-group"> <button class="tw-btn tw-btn-danger" type="button">8</button> </div> </div> </div> <!-- Outline Groups --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Outline Button Groups</p> <div class="tw-btn-group"> <button class="tw-btn tw-btn-outline-primary" type="button">Left</button> <button class="tw-btn tw-btn-outline-primary" type="button">Middle</button> <button class="tw-btn tw-btn-outline-primary" type="button">Right</button> </div> </div> <!-- Vertical Button Group --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Vertical Group</p> <div class="tw-btn-group-vertical"> <button class="tw-btn tw-btn-primary" type="button">Button</button> <button class="tw-btn tw-btn-primary" type="button">Button</button> <button class="tw-btn tw-btn-primary" type="button">Button</button> <button class="tw-btn tw-btn-primary" type="button">Button</button> <button class="tw-btn tw-btn-primary" type="button">Button</button> <button class="tw-btn tw-btn-primary" type="button">Button</button> </div> </div> <!-- Button Group Sizes --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Button Group Sizes</p> <div class="tw:flex tw:flex-col tw:gap-3"> <div class="tw-btn-group-lg"> <button class="tw-btn tw-btn-secondary" type="button">Large</button> <button class="tw-btn tw-btn-secondary" type="button">Group</button> <button class="tw-btn tw-btn-secondary" type="button">Buttons</button> </div> <div class="tw-btn-group"> <button class="tw-btn tw-btn-secondary" type="button">Default</button> <button class="tw-btn tw-btn-secondary" type="button">Group</button> <button class="tw-btn tw-btn-secondary" type="button">Buttons</button> </div> <div class="tw-btn-group-sm"> <button class="tw-btn tw-btn-secondary" type="button">Small</button> <button class="tw-btn tw-btn-secondary" type="button">Group</button> <button class="tw-btn tw-btn-secondary" type="button">Buttons</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-btn-group"&gt;&lt;button class="tw-btn tw-btn-secondary"&gt;Left&lt;/button&gt;...&lt;/div&gt;</code><br> <code>&lt;div class="tw-btn-group-vertical"&gt;...&lt;/div&gt;</code> </div> </div> <!-- Section 9: Dropdown Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Dropdown Buttons</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Dropdown Toggle:</strong> Buttons with dropdown arrows to indicate a menu or additional options. Add the <code>.tw-dropdown-toggle</code> class to automatically display a dropdown arrow. </p> </div> <div class="tw:space-y-4"> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Solid Dropdowns</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-primary tw-dropdown-toggle" type="button">Primary</button> <button class="tw-btn tw-btn-success tw-dropdown-toggle" type="button">Success</button> <button class="tw-btn tw-btn-info tw-dropdown-toggle" type="button">Info</button> <button class="tw-btn tw-btn-danger tw-dropdown-toggle" type="button">Danger</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Outline Dropdowns</p> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-outline-primary tw-dropdown-toggle" type="button">Primary</button> <button class="tw-btn tw-btn-outline-secondary tw-dropdown-toggle" type="button">Secondary</button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Dropdown Sizes</p> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-primary tw-btn-lg tw-dropdown-toggle" type="button">Large</button> <button class="tw-btn tw-btn-primary tw-dropdown-toggle" type="button">Default</button> <button class="tw-btn tw-btn-primary tw-btn-sm tw-dropdown-toggle" type="button">Small</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-primary tw-dropdown-toggle"&gt;Dropdown&lt;/button&gt;</code> </div> </div> <!-- Split Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Split Buttons</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>One main action + attached alternatives:</strong> the label button performs the default action; the caret opens a menu of variants ("Save" | ▾ → Save &amp; add another, Save as draft). A <code>.tw-btn-group</code> whose second slot is a full <code>.tw-dropdown</code> wrapper — the caret carries <code>.tw-dropdown-toggle .tw-dropdown-toggle-split</code> and <strong>must</strong> have an <code>aria-label</code>. Use a split only when one action clearly dominates; equals get a plain dropdown. </p> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-4"> <div class="tw-btn-group"> <button class="tw-btn tw-btn-primary" type="button">Save</button> <div class="tw-dropdown" data-controller="dropdown"> <button class="tw-btn tw-btn-primary tw-dropdown-toggle tw-dropdown-toggle-split" type="button" aria-label="More save options" aria-expanded="false" data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown"></button> <div class="tw-dropdown-menu" data-dropdown-target="menu"> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">Save &amp; add another</button> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">Save as draft</button> <div class="tw-dropdown-divider"></div> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">Save as template…</button> </div> </div> </div> <div class="tw-btn-group"> <button class="tw-btn tw-btn-secondary" type="button">Export</button> <div class="tw-dropdown" data-controller="dropdown"> <button class="tw-btn tw-btn-secondary tw-dropdown-toggle tw-dropdown-toggle-split" type="button" aria-label="More export options" aria-expanded="false" data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown"></button> <div class="tw-dropdown-menu" data-dropdown-target="menu"> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">Export as CSV</button> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">Export as PDF</button> </div> </div> </div> <div class="tw-btn-group tw-btn-group-sm"> <button class="tw-btn tw-btn-secondary" type="button">Duplicate</button> <div class="tw-dropdown" data-controller="dropdown"> <button class="tw-btn tw-btn-secondary tw-dropdown-toggle tw-dropdown-toggle-split" type="button" aria-label="More duplicate options" aria-expanded="false" data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown"></button> <div class="tw-dropdown-menu" data-dropdown-target="menu"> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">Duplicate with data</button> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">Duplicate structure only</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-btn-group"&gt;&lt;button class="tw-btn tw-btn-primary"&gt;Save&lt;/button&gt;&lt;div class="tw-dropdown"&gt;&lt;button class="tw-btn tw-btn-primary tw-dropdown-toggle tw-dropdown-toggle-split" aria-label="More save options"&gt;&lt;/button&gt;…&lt;/div&gt;&lt;/div&gt;</code> </div> </div> <!-- Disabled With a Reason --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Disabled With a Reason</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Never leave a user guessing:</strong> a disabled button can't explain itself — it takes no hover and no focus. Wrap it in <code>.tw-btn-disabled-wrap</code> with <code>tabindex="0"</code> and put the tooltip (the reason) on the wrapper: pointer events fall through the disabled child, and keyboard users can Tab to the wrapper to hear the reason. The cursor reads <em>not-allowed</em> over the whole button. </p> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-4"> <span class="tw-btn-disabled-wrap" tabindex="0" data-controller="tooltip" data-tooltip-content-value="Add at least one recipient first"> <button class="tw-btn tw-btn-primary" disabled>Send invitations</button> </span> <span class="tw-btn-disabled-wrap" tabindex="0" data-controller="tooltip" data-tooltip-content-value="Applications close on 31 August — reopen the form in Settings"> <button class="tw-btn tw-btn-secondary" disabled>Reopen form</button> </span> <span class="tw-btn-disabled-wrap" tabindex="0" data-controller="tooltip" data-tooltip-content-value="Only administrators can delete intakes"> <button class="tw-btn tw-btn-danger" disabled>Delete intake</button> </span> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;span class="tw-btn-disabled-wrap" tabindex="0" data-controller="tooltip" data-tooltip-content-value="Why it's disabled"&gt;&lt;button class="tw-btn tw-btn-primary" disabled&gt;Action&lt;/button&gt;&lt;/span&gt;</code> </div> </div> <!-- Section 10: Checkbox & Radio Buttons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Checkbox & Radio Button Groups</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Button-style Checkboxes/Radios:</strong> Form controls styled as buttons. Use hidden <code>.tw-btn-check</code> inputs with <code>&lt;label&gt;</code> elements styled as buttons for accessible toggle controls. </p> </div> <div class="tw:space-y-6"> <!-- Checkbox Buttons --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Checkbox Buttons (Multiple Select)</p> <div class="tw-btn-group"> <input type="checkbox" class="tw-btn-check" id="checkbox1" autocomplete="off"> <label class="tw-btn tw-btn-primary" for="checkbox1">Checkbox 1</label> <input type="checkbox" class="tw-btn-check" id="checkbox2" autocomplete="off" checked> <label class="tw-btn tw-btn-primary" for="checkbox2">Checkbox 2</label> <input type="checkbox" class="tw-btn-check" id="checkbox3" autocomplete="off"> <label class="tw-btn tw-btn-primary" for="checkbox3">Checkbox 3</label> </div> </div> <!-- Radio Buttons --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Radio Buttons (Single Select)</p> <div class="tw-btn-group"> <input type="radio" class="tw-btn-check" name="options" id="radio1" autocomplete="off" checked> <label class="tw-btn tw-btn-secondary" for="radio1">Radio 1</label> <input type="radio" class="tw-btn-check" name="options" id="radio2" autocomplete="off"> <label class="tw-btn tw-btn-secondary" for="radio2">Radio 2</label> <input type="radio" class="tw-btn-check" name="options" id="radio3" autocomplete="off"> <label class="tw-btn tw-btn-secondary" for="radio3">Radio 3</label> </div> </div> <!-- Color Variants --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Different Color Variants</p> <div class="tw:space-y-3"> <div class="tw-btn-group"> <input type="checkbox" class="tw-btn-check" id="check-success1" autocomplete="off" checked> <label class="tw-btn tw-btn-success" for="check-success1">Success 1</label> <input type="checkbox" class="tw-btn-check" id="check-success2" autocomplete="off"> <label class="tw-btn tw-btn-success" for="check-success2">Success 2</label> </div> <div class="tw-btn-group"> <input type="checkbox" class="tw-btn-check" id="check-danger1" autocomplete="off"> <label class="tw-btn tw-btn-danger" for="check-danger1">Danger 1</label> <input type="checkbox" class="tw-btn-check" id="check-danger2" autocomplete="off" checked> <label class="tw-btn tw-btn-danger" for="check-danger2">Danger 2</label> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;input type="checkbox" class="tw-btn-check" id="check1"&gt;</code><br> <code>&lt;label class="tw-btn tw-btn-primary" for="check1"&gt;Checkbox&lt;/label&gt;</code> </div> </div> <!-- Section 11: Pagination --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Pagination</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Pagination:</strong> Navigation component for paging through content. Use <code>.tw-pagination</code> container with <code>.tw-page-item</code> and <code>.tw-page-link</code> classes. </p> </div> <div class="tw:space-y-6"> <!-- Basic Pagination --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Basic Pagination</p> <nav aria-label="Page navigation"> <ul class="tw-pagination"> <li class="tw-page-item"><a class="tw-page-link" href="#">Previous</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">1</a></li> <li class="tw-page-item tw-active"><a class="tw-page-link" href="#">2</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">3</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">Next</a></li> </ul> </nav> </div> <!-- With Disabled States --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">With Disabled States</p> <nav aria-label="Page navigation"> <ul class="tw-pagination"> <li class="tw-page-item tw-disabled"><a class="tw-page-link" href="#">Previous</a></li> <li class="tw-page-item tw-active"><a class="tw-page-link" href="#">1</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">2</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">3</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">4</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">5</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">6</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">7</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">8</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">Next</a></li> </ul> </nav> </div> <!-- Pagination Sizes --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Pagination Sizes</p> <div class="tw:space-y-3"> <nav aria-label="Large pagination"> <ul class="tw-pagination tw-pagination-lg"> <li class="tw-page-item"><a class="tw-page-link" href="#">1</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">2</a></li> <li class="tw-page-item tw-active"><a class="tw-page-link" href="#">3</a></li> </ul> </nav> <nav aria-label="Default pagination"> <ul class="tw-pagination"> <li class="tw-page-item"><a class="tw-page-link" href="#">1</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">2</a></li> <li class="tw-page-item tw-active"><a class="tw-page-link" href="#">3</a></li> </ul> </nav> <nav aria-label="Small pagination"> <ul class="tw-pagination tw-pagination-sm"> <li class="tw-page-item"><a class="tw-page-link" href="#">1</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">2</a></li> <li class="tw-page-item tw-active"><a class="tw-page-link" href="#">3</a></li> </ul> </nav> </div> </div> <!-- Grouped Pagination (like screenshot) --> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Grouped Numbers</p> <div class="tw:flex tw:gap-3"> <nav aria-label="Group 1"> <ul class="tw-pagination"> <li class="tw-page-item"><a class="tw-page-link" href="#">1</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">2</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">3</a></li> <li class="tw-page-item tw-active"><a class="tw-page-link" href="#">4</a></li> </ul> </nav> <nav aria-label="Group 2"> <ul class="tw-pagination"> <li class="tw-page-item"><a class="tw-page-link" href="#">5</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">6</a></li> <li class="tw-page-item"><a class="tw-page-link" href="#">7</a></li> </ul> </nav> <nav aria-label="Group 3"> <ul class="tw-pagination"> <li class="tw-page-item"><a class="tw-page-link" href="#">8</a></li> </ul> </nav> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;ul class="tw-pagination"&gt;&lt;li class="tw-page-item tw-active"&gt;&lt;a class="tw-page-link"&gt;1&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;</code> </div> </div> <!-- Quick Reference Footer --> <div class="tw:border-t tw:pt-6 tw:mt-8"> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p> <p class="tw:mb-0 tw:text-xs tw:font-mono"> <strong>Base:</strong> .tw-btn<br> <strong>Solid:</strong> .tw-btn-{primary|secondary|success|danger|warning|info}<br> <strong>Outline:</strong> .tw-btn-outline-{primary|secondary|success|danger|warning|info}<br> <strong>Tertiary:</strong> .tw-btn-tertiary<br> <strong>Sizes:</strong> .tw-btn-sm (small) | default (no class) | .tw-btn-lg (large)<br> <strong>Icons:</strong> .tw-btn-icon (square icon-only button) | use &lt;i class="fa-*"&gt; for Font Awesome icons<br> <strong>Layout:</strong> .tw-btn-block (full width) | .tw-btn-heavy (bold text)<br> <strong>Groups:</strong> .tw-btn-group (horizontal) | .tw-btn-group-vertical | .tw-btn-group-{sm|lg}<br> <strong>Dropdown:</strong> .tw-dropdown-toggle (adds arrow indicator)<br> <strong>Checkbox/Radio:</strong> .tw-btn-check (input) + .tw-btn (label)<br> <strong>Pagination:</strong> .tw-pagination > .tw-page-item > .tw-page-link | .tw-page-item.tw-active | .tw-page-item.tw-disabled<br> <strong>Pagination Sizes:</strong> .tw-pagination-sm | .tw-pagination-lg<br> <strong>State:</strong> disabled attribute (reduces opacity, disables interaction)<br> <strong>Usage:</strong> Combine classes like .tw-btn.tw-btn-primary.tw-btn-lg or .tw-btn.tw-btn-outline-danger.tw-btn-sm </p> </div> </div> <!-- Soft tier (2026-08-11, DR-2026-13) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Soft tier</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Soft:</strong> tinted fill, no border weight — quieter than solid, more present than tertiary. Reuses the badge/tag soft tokens, so a soft button and a soft badge of the same variant read as one family. Use for secondary actions in dense surfaces (DR-2026-13). </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="tw-btn tw-btn-soft-primary" type="button">Primary</button> <button class="tw-btn tw-btn-soft-secondary" type="button">Secondary</button> <button class="tw-btn tw-btn-soft-success" type="button">Success</button> <button class="tw-btn tw-btn-soft-danger" type="button">Danger</button> <button class="tw-btn tw-btn-soft-warning" type="button">Warning</button> <button class="tw-btn tw-btn-soft-info" type="button">Info</button> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:mt-3"> <button class="tw-btn tw-btn-soft-primary tw-btn-sm" type="button">Small</button> <button class="tw-btn tw-btn-soft-primary tw-btn-lg" type="button">Large</button> <button class="tw-btn tw-btn-soft-danger tw-btn-icon" type="button" aria-label="Withdraw"><i class="fa-regular fa-trash"></i></button> <span class="tw-badge tw-badge-primary-soft">matching badge</span> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-soft-primary"&gt;Assign reviewer&lt;/button&gt;</code> </div> </div> <!-- Link button (2026-08-11, variant re-run) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Link button</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Link:</strong> an action that lives <em>inside a sentence</em>. Resets the button box entirely — no padding, border or radius, baseline-aligned, inherits the surrounding text size. <strong>Not</strong> for control rows: beside a primary button use <code>.tw-btn-tertiary</code>, whose matching height and hit area is the point. And if it <em>navigates</em>, it's a real <code>&lt;a href&gt;</code>, not a button. </p> </div> <div class="tw:space-y-4 tw:max-w-2xl"> <p class="tw:mb-0">Changes are saved automatically as you type. <button class="tw-btn tw-btn-link" type="button">Learn how autosave works</button> </p> <div> <label for="btn-link-pc" class="tw-form-label">School postcode</label> <input id="btn-link-pc" class="tw-form-control" type="text" value="M14 5TQ"> <p class="tw:text-muted tw:text-sm tw:mt-1 tw:mb-0">Used to calculate distance. <button class="tw-btn tw-btn-link" type="button">Why do we need this?</button> </p> </div> <div class="tw-inline-notification tw-inline-notification-warning"> <i class="tw-inline-notification-icon fa-solid fa-triangle-exclamation" aria-hidden="true"></i> <div class="tw-inline-notification-content"> <p class="tw-inline-notification-title">12 offers expire on Friday</p> <p class="tw-inline-notification-message tw:mb-0">Families who haven't responded lose their place. <button class="tw-btn tw-btn-link" type="button">See the list</button> </p> </div> </div> <div class="tw-callout"> <p class="tw:mb-2 tw:text-sm"><strong>Contrast — the control row, where tertiary is correct:</strong></p> <div class="tw:flex tw:items-center tw:gap-2"> <button class="tw-btn tw-btn-primary" type="button">Save changes</button> <button class="tw-btn tw-btn-tertiary" type="button">Cancel</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;p&gt;Changes are saved automatically. &lt;button class="tw-btn tw-btn-link" type="button"&gt;Learn how autosave works&lt;/button&gt;&lt;/p&gt;</code> </div> </div> <!-- Dashed (add-item) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Dashed (Add-Item)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>DASHED:</strong> .tw-btn-dashed — transparent ground, dashed neutral border, normal weight </p> <p class="tw:mb-0 tw:text-sm"> The <strong>add-another row</strong> at the end of a repeating list — reminders, contacts, custom fields, criteria. The dashed edge says "this is a slot you can fill", which a solid button does not; it is the quietest button in the system on purpose, because it must not out-rank the form's real submit. Pair it with <code>.tw-btn-block</code> so it spans the list it belongs to, and always label it with a leading <code>+</code> or plus icon plus the noun it adds. Do not use it for anything destructive, and do not use it as a general secondary button — that is <code>.tw-btn-secondary</code>. </p> </div> <div class="tw:max-w-lg tw:space-y-3"> <div class="tw-card"> <div class="tw-card-body"> <h3 class="tw-h5 tw:mb-3">Open day reminders</h3> <div class="tw:space-y-2 tw:mb-3"> <div class="tw:flex tw:items-center tw:justify-between tw:gap-3 tw:border tw:border-neutral-200 tw:rounded-md tw:px-3 tw:py-2"> <span class="tw:text-sm">Email — 7 days before</span> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-tertiary-neutral tw-btn-sm" type="button" aria-label="Remove reminder: email 7 days before"> <i class="fa-regular fa-trash" aria-hidden="true"></i> </button> </div> <div class="tw:flex tw:items-center tw:justify-between tw:gap-3 tw:border tw:border-neutral-200 tw:rounded-md tw:px-3 tw:py-2"> <span class="tw:text-sm">SMS — 1 day before</span> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-tertiary-neutral tw-btn-sm" type="button" aria-label="Remove reminder: SMS 1 day before"> <i class="fa-regular fa-trash" aria-hidden="true"></i> </button> </div> </div> <button class="tw-btn tw-btn-dashed tw-btn-block" type="button"> <i class="fa-regular fa-plus" aria-hidden="true"></i> Add another reminder </button> </div> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-2">Sizes — inline use</p> <div class="tw:flex tw:flex-wrap tw:gap-3 tw:items-center"> <button class="tw-btn tw-btn-dashed tw-btn-sm" type="button"> <i class="fa-regular fa-plus" aria-hidden="true"></i> Add criterion </button> <button class="tw-btn tw-btn-dashed" type="button"> <i class="fa-regular fa-plus" aria-hidden="true"></i> Add contact </button> <button class="tw-btn tw-btn-dashed tw-btn-lg" type="button"> <i class="fa-regular fa-plus" aria-hidden="true"></i> Add intake </button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;button class="tw-btn tw-btn-dashed tw-btn-block" type="button"&gt;&lt;i class="fa-regular fa-plus" aria-hidden="true"&gt;&lt;/i&gt; Add another reminder&lt;/button&gt;</code> </div> </div> </div>