Button Pure
A minimal, transparent button — icon and label only, without background or border. Use it for inline actions, contextual links, and secondary affordances where a full button would be too heavy.
When to use
Do
- ✓Use for inline or low-emphasis actions that do not need a full button shape.
- ✓Use for "Read more", "Show all", or "Back" affordances.
- ✓Use with alignLabel="start" and stretch for list or accordion rows.
- ✓Use icon-only mode for dense UIs — always set the label prop for screen readers.
Don't
- ✕Don't use as a primary CTA — use diwa-button variant="primary" instead.
- ✕Don't use for navigation — use an anchor or diwa-button with href.
- ✕Don't omit the label when hiding it visually; always set the label prop.
- ✕Don't cluster multiple pure buttons without sufficient spacing.
Icon alignment
alignLabel="end" (default) places the icon before the label — → Read more. Use alignLabel="start" to place the label first — common in back-navigation patterns: Go back ←. Combine with stretch=true to push icon and label to opposite edges in list rows.
Stretch
Setting stretch=true makes the button fill its container width and uses justify-content: space-between to push icon and label apart. This is ideal for sidebar navigation rows, accordion headers, and expandable list items.
vs. diwa-button
| diwa-button | diwa-button-pure |
|---|---|
| Primary CTA, form submit, destructive action | Inline action, contextual affordance |
| Has background, border, fill shape | Transparent — icon + text only |
| Fixed height tiers (32/40/44px) | Height follows line-height of text |
| variant prop (primary/secondary/ghost/danger) | No variant — single visual style |