widget actions shortcuts grid dashboard quick widget actions shortcuts grid quick buttons quick action buttons grid dashboard shortcut widget
Widget Quick Actions
Fetch pattern JSON:
curl https://webspire.de/patterns/widgets/quick-actions.json quick-actions.html
<div class="ws-widgets rounded-xl border border-[var(--ws-widgets-border)] bg-[var(--ws-widgets-bg)] p-5">
<h3 class="mb-4 text-sm font-semibold text-[var(--ws-widgets-text)]">Quick Actions</h3>
<div class="grid grid-cols-2 gap-3">
<a href="#new-document" class="flex flex-col items-center gap-2 rounded-lg border border-[var(--ws-widgets-border)] p-4 text-center transition hover:border-[var(--ws-widgets-accent)] hover:bg-[var(--ws-widgets-accent)]/5">
<svg class="h-6 w-6 text-[var(--ws-widgets-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
</svg>
<span class="text-xs font-medium text-[var(--ws-widgets-text)]">New Document</span>
</a>
<a href="#upload-file" class="flex flex-col items-center gap-2 rounded-lg border border-[var(--ws-widgets-border)] p-4 text-center transition hover:border-[var(--ws-widgets-accent)] hover:bg-[var(--ws-widgets-accent)]/5">
<svg class="h-6 w-6 text-[var(--ws-widgets-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
</svg>
<span class="text-xs font-medium text-[var(--ws-widgets-text)]">Upload File</span>
</a>
<a href="#create-report" class="flex flex-col items-center gap-2 rounded-lg border border-[var(--ws-widgets-border)] p-4 text-center transition hover:border-[var(--ws-widgets-accent)] hover:bg-[var(--ws-widgets-accent)]/5">
<svg class="h-6 w-6 text-[var(--ws-widgets-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
</svg>
<span class="text-xs font-medium text-[var(--ws-widgets-text)]">Create Report</span>
</a>
<a href="#settings" class="flex flex-col items-center gap-2 rounded-lg border border-[var(--ws-widgets-border)] p-4 text-center transition hover:border-[var(--ws-widgets-accent)] hover:bg-[var(--ws-widgets-accent)]/5">
<svg class="h-6 w-6 text-[var(--ws-widgets-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>
<span class="text-xs font-medium text-[var(--ws-widgets-text)]">Settings</span>
</a>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
widgetactionsshortcutsgriddashboardquick
Slots
| Name | Required | Description |
|---|---|---|
| title | Yes | Widget heading text. |
| actions | Yes | Grid of action cards with icons and labels. |
A 2x2 grid of action cards, each with an icon and label. Hover state highlights the accent border. Ideal for dashboard sidebars offering quick access to common tasks.