Vielzeug

Appearance

Common Patterns ​

Problem ​

You need ready-to-use Sigil component patterns for common UI scenarios: form actions, confirmation dialogs, pagination, toolbars, loading states, and button groups.

Solution ​

Compose Sigil components with standard HTML layout. Each snippet below is a self-contained, copy-paste runnable example.

Form Actions ​

PreviewCode
RTL

Confirmation Dialog ​

PreviewCode
RTL

Pagination ​

PreviewCode
RTL

Toolbar ​

PreviewCode
RTL

Loading States ​

PreviewCode
RTL

Button Group ​

PreviewCode
RTL

Pitfalls ​

  • Import @vielzeug/sigil/styles before any component import or buttons and inputs render without design tokens.
  • <sg-button-group> requires the attached attribute to merge borders visually; omitting it renders buttons with gaps.
  • Use type="submit" and type="reset" on <sg-button> inside a <form> — the default type is 'button', which does not submit or reset.