1. Docs
2. Components
3. Forms & inputs
4. Close Button

Close Button 1.2.2

A generic close button using .velin-btn--close. Renders a × symbol via CSS ::after — no inner HTML needed. Deutsch: Schliessen Button

When to use

• Dismiss controls for alerts, cards, or overlays using .velin-btn--close.
• When you need a compact icon button that matches VelinStyle’s close affordance.

When not

• General primary actions — use Buttons.
• Navigation “back” — use a labelled button or link, not a close glyph.

Basic Example

<button class="velin-btn--close" aria-label="Close"></button>

Disabled State

<button class="velin-btn--close" aria-label="Close" disabled></button>

Accessibility

• Always include aria-label="Close" since the button has no visible text.
• Minimum 44×44px touch target is enforced via min-block-size / min-inline-size.

CSS Variables

Related

• Alerts
• Buttons
• Modal