Components
Button
<button class="btn btn-primary">Search User</button>
<button class="btn btn-outline">Clear</button>
<button class="btn btn-destructive">Delete User</button>Disabled
<button class="btn btn-primary" disabled>Search Invoice</button>Sizes
<button class="btn btn-outline btn-sm">Small</button>
<button class="btn btn-outline btn-lg">Large</button>
<button class="btn btn-outline btn-icon" aria-label="Search"><svg>...</svg></button>Search field
<div class="field">
<label class="label" for="q">Project ID or URL</label>
<div class="field-row">
<input class="input input-strong" id="q" placeholder="...">
<button class="btn btn-primary" disabled>Search Project</button>
</div>
</div>Input states
Must start with user_
<input class="input" aria-invalid="true">
<input class="input" disabled>Select
<select class="select">...</select>Nav links
<a class="nav-link" aria-current="page" href="/moderator">Dashboard</a>
<a class="nav-link" href="/moderator/actions">Actions</a>Badge
Draft
Published
Banned
<span class="badge badge-sky">Published</span>Compact & brand buttons
<button class="btn btn-brand">Assign 20 GIFs</button>
<button class="btn btn-primary btn-compact">For review</button>
<button class="btn btn-outline btn-compact">Reviewed</button>Card
Find User
Card content.
<div class="card">
<div class="card-header"><svg class="text-info">...</svg><h2 class="card-title">Find User</h2></div>
...
</div>Form message
The result of a form is one line of text under the form row. Red for errors, green for success. No popups.
<p class="form-message" data-type="error">No user found for "x"</p>
// or from script, appended to the form:
lemonadeMessage(form, 'No user found for "x"', 'error')
lemonadeMessage(form, '') // clearToast
Only for events the user didn't trigger on this page, like a background export finishing. Stacks in the bottom-right corner.
lemonadeToast('Export finished', 'success')