مكون معماري رسمي
0kb Client RSC
WCAG 2.1 AA
100% Logical CSS
الأزرار التفاعلية الشاملة Button
Primary action control triggering immediate state transition
renderers/html/native/button.html
المتغيرات:
default, primary, secondary
renderers/html/native/button.html · HTML5 Strict Markup
<!-- Qahera UI Kit — Authoritative Button Gallery & Showcase -->
<div style="display: flex; flex-direction: column; gap: var(--qhr-space-8); padding: var(--qhr-space-6);">
<!-- 1. Gradient Buttons -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Gradient Buttons</h3>
<p style="color: var(--qhr-text-muted); font-size: 0.85rem; margin-block-end: 12px;">Using <code>.qhr-btn.qhr-btn--gradient.qhr-btn--tone-[tone]</code></p>
<div style="display: flex; gap: var(--qhr-space-3); flex-wrap: wrap;">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--gradient qhr-btn--tone-primary">Primary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--gradient qhr-btn--tone-secondary">Secondary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--gradient qhr-btn--tone-info">Info</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--gradient qhr-btn--tone-success">Success</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--gradient qhr-btn--tone-danger">Danger</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--gradient qhr-btn--tone-warning">Warning</button>
</div>
</section>
<!-- 2. General Buttons -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">General Buttons</h3>
<p style="color: var(--qhr-text-muted); font-size: 0.85rem; margin-block-end: 12px;">Using <code>.qhr-btn.qhr-btn--tone-[tone]</code></p>
<div style="display: flex; gap: var(--qhr-space-3); flex-wrap: wrap;">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-default">Default</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-primary">Primary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-secondary">Secondary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-info">Info</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-success">Success</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-danger">Danger</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-warning">Warning</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-dark">Dark</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-light">Light</button>
</div>
</section>
<!-- 3. Light Buttons -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Light Buttons</h3>
<p style="color: var(--qhr-text-muted); font-size: 0.85rem; margin-block-end: 12px;">Using <code>.qhr-btn.qhr-btn--light.qhr-btn--tone-[tone]</code></p>
<div style="display: flex; gap: var(--qhr-space-3); flex-wrap: wrap;">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--light qhr-btn--tone-primary">Primary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--light qhr-btn--tone-info">Info</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--light qhr-btn--tone-success">Success</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--light qhr-btn--tone-danger">Danger</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--light qhr-btn--tone-warning">Warning</button>
</div>
</section>
<!-- 4. Button with outline -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Button with outline</h3>
<p style="color: var(--qhr-text-muted); font-size: 0.85rem; margin-block-end: 12px;">Using <code>.qhr-btn.qhr-btn--outline.qhr-btn--tone-[tone]</code></p>
<div style="display: flex; gap: var(--qhr-space-3); flex-wrap: wrap;">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline qhr-btn--tone-default">Default</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline qhr-btn--tone-primary">Primary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline qhr-btn--tone-secondary">Secondary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline qhr-btn--tone-info">Info</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline qhr-btn--tone-success">Success</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline qhr-btn--tone-danger">Danger</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline qhr-btn--tone-warning">Warning</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline qhr-btn--tone-dark">Dark</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline qhr-btn--tone-light">Light</button>
</div>
</section>
<!-- 5. Light Button with outline -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Light Button with outline</h3>
<p style="color: var(--qhr-text-muted); font-size: 0.85rem; margin-block-end: 12px;">Using <code>.qhr-btn.qhr-btn--outline-light.qhr-btn--tone-[tone]</code></p>
<div style="display: flex; gap: var(--qhr-space-3); flex-wrap: wrap;">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline-light qhr-btn--tone-primary">Primary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline-light qhr-btn--tone-info">Info</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline-light qhr-btn--tone-success">Success</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline-light qhr-btn--tone-danger">Danger</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--outline-light qhr-btn--tone-warning">Warning</button>
</div>
</section>
<!-- 6. Rounded Buttons -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Rounded Buttons</h3>
<p style="color: var(--qhr-text-muted); font-size: 0.85rem; margin-block-end: 12px;">Using <code>.qhr-btn.qhr-btn--rounded.qhr-btn--tone-[tone]</code></p>
<div style="display: flex; gap: var(--qhr-space-3); flex-wrap: wrap;">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--tone-default">Default</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--tone-primary">Primary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--tone-secondary">Secondary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--tone-info">Info</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--tone-success">Success</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--tone-danger">Danger</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--tone-warning">Warning</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--tone-dark">Dark</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--tone-light">Light</button>
</div>
</section>
<!-- 7. Light Rounded Buttons -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Light Rounded Buttons</h3>
<div style="display: flex; gap: var(--qhr-space-3); flex-wrap: wrap;">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--light qhr-btn--tone-primary">Primary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--light qhr-btn--tone-info">Info</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--light qhr-btn--tone-success">Success</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--light qhr-btn--tone-danger">Danger</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--rounded qhr-btn--light qhr-btn--tone-warning">Warning</button>
</div>
</section>
<!-- 8. Button Sizes -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Button Sizes</h3>
<div style="display: flex; gap: var(--qhr-space-3); align-items: center; flex-wrap: wrap;">
<button type="button" class="qhr-btn qhr-btn--xs qhr-btn--tone-info">Info Extra Small (xs)</button>
<button type="button" class="qhr-btn qhr-btn--sm qhr-btn--tone-secondary">Secondary Small (sm)</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-default">Default Normal (md)</button>
<button type="button" class="qhr-btn qhr-btn--lg qhr-btn--tone-primary">Primary btn Large (lg)</button>
<button type="button" class="qhr-btn qhr-btn--xl qhr-btn--tone-primary">Primary btn Extra Large (xl)</button>
</div>
</section>
<!-- 9. Flat Buttons -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Flat Buttons</h3>
<div style="display: flex; gap: var(--qhr-space-3); flex-wrap: wrap;">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--flat qhr-btn--tone-default">Default</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--flat qhr-btn--light qhr-btn--tone-primary">Primary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--flat qhr-btn--tone-secondary">Secondary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--flat qhr-btn--light qhr-btn--tone-info">Info</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--flat qhr-btn--light qhr-btn--tone-success">Success</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--flat qhr-btn--light qhr-btn--tone-danger">Danger</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--flat qhr-btn--light qhr-btn--tone-warning">Warning</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--flat qhr-btn--tone-dark">Dark</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--flat qhr-btn--tone-light">Light</button>
</div>
</section>
<!-- 10. Button with icon -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Button with icon</h3>
<div style="display: flex; gap: var(--qhr-space-3); flex-wrap: wrap;">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-default">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Default</span>
</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-primary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Primary</span>
</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-secondary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Secondary</span>
</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-info">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Info</span>
</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-success">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Success</span>
</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-danger">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Danger</span>
</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-warning">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Warning</span>
</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-dark">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Dark</span>
</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-light">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Light</span>
</button>
</div>
</section>
<!-- 11. Split buttons & Button with Dropdown -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Split buttons & Dropdown</h3>
<div style="display: flex; gap: var(--qhr-space-4); flex-wrap: wrap; align-items: center;">
<!-- Split Button Primary -->
<div class="qhr-btn-split">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-primary">Primary</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-primary" aria-label="خيارات إضافية">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
</div>
<!-- Split Button Info -->
<div class="qhr-btn-split">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-info">Info</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-info" aria-label="خيارات إضافية">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
</div>
<!-- Button with Dropdown -->
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-success">
<span>Success</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-danger">
<span>Danger</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
</div>
</section>
<!-- 12. Circle Buttons -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Circle Buttons</h3>
<div style="display: flex; flex-direction: column; gap: var(--qhr-space-3);">
<!-- xs -->
<div style="display: flex; gap: 8px; align-items: center;">
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--xs qhr-btn--tone-default" aria-label="Default"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--xs qhr-btn--tone-primary" aria-label="Primary"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--xs qhr-btn--tone-secondary" aria-label="Secondary"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--xs qhr-btn--tone-info" aria-label="Info"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--xs qhr-btn--tone-success" aria-label="Success"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--xs qhr-btn--tone-danger" aria-label="Danger"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--xs qhr-btn--tone-warning" aria-label="Warning"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--xs qhr-btn--tone-dark" aria-label="Dark"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<span style="font-size: 0.75rem; color: var(--qhr-text-muted);">.qhr-btn--xs</span>
</div>
<!-- sm -->
<div style="display: flex; gap: 8px; align-items: center;">
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--sm qhr-btn--tone-default" aria-label="Default"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--sm qhr-btn--tone-primary" aria-label="Primary"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--sm qhr-btn--tone-secondary" aria-label="Secondary"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--sm qhr-btn--tone-info" aria-label="Info"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--sm qhr-btn--tone-success" aria-label="Success"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--sm qhr-btn--tone-danger" aria-label="Danger"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--sm qhr-btn--tone-warning" aria-label="Warning"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--sm qhr-btn--tone-dark" aria-label="Dark"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<span style="font-size: 0.75rem; color: var(--qhr-text-muted);">.qhr-btn--sm</span>
</div>
<!-- md (Default) -->
<div style="display: flex; gap: 8px; align-items: center;">
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--md qhr-btn--tone-default" aria-label="Default"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--md qhr-btn--tone-primary" aria-label="Primary"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--md qhr-btn--tone-secondary" aria-label="Secondary"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--md qhr-btn--tone-info" aria-label="Info"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--md qhr-btn--tone-success" aria-label="Success"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--md qhr-btn--tone-danger" aria-label="Danger"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--md qhr-btn--tone-warning" aria-label="Warning"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--md qhr-btn--tone-dark" aria-label="Dark"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<span style="font-size: 0.75rem; color: var(--qhr-text-muted);">Default (.qhr-btn--md)</span>
</div>
<!-- lg -->
<div style="display: flex; gap: 8px; align-items: center;">
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--lg qhr-btn--tone-default" aria-label="Default"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--lg qhr-btn--tone-primary" aria-label="Primary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--lg qhr-btn--tone-secondary" aria-label="Secondary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--lg qhr-btn--tone-info" aria-label="Info"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--lg qhr-btn--tone-success" aria-label="Success"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--lg qhr-btn--tone-danger" aria-label="Danger"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--lg qhr-btn--tone-warning" aria-label="Warning"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<button type="button" class="qhr-btn qhr-btn--circle qhr-btn--lg qhr-btn--tone-dark" aria-label="Dark"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg></button>
<span style="font-size: 0.75rem; color: var(--qhr-text-muted);">.qhr-btn--lg</span>
</div>
</div>
</section>
<!-- 13. Horizontal & Vertical Button Groups -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Button Groups</h3>
<div style="display: flex; gap: var(--qhr-space-6); flex-wrap: wrap; align-items: flex-start;">
<!-- Horizontal -->
<div>
<div style="font-size: 0.85rem; color: var(--qhr-text-muted); margin-block-end: 8px;">Horizontal Button Group</div>
<div class="qhr-btn-group">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-info">Left</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-info">Middle</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-info">Right</button>
</div>
</div>
<!-- Vertical -->
<div>
<div style="font-size: 0.85rem; color: var(--qhr-text-muted); margin-block-end: 8px;">Vertical Button Group</div>
<div class="qhr-btn-group--vertical" style="width: 140px;">
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-info">Left</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-info">Middle</button>
<button type="button" class="qhr-btn qhr-btn--md qhr-btn--tone-info">Right</button>
</div>
</div>
</div>
</section>
<!-- 14. Application Buttons -->
<section>
<h3 style="margin-block-end: 8px; font-weight: 700;">Application Buttons</h3>
<div style="display: flex; gap: var(--qhr-space-3); flex-wrap: wrap;">
<a href="#" class="qhr-btn-app">
<span class="qhr-badge qhr-badge--danger" style="font-size: 10px; padding: 2px 6px;">جديد</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<span>البريد</span>
</a>
<a href="#" class="qhr-btn-app">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
<span>التقويم</span>
</a>
<a href="#" class="qhr-btn-app">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
<span>المحادثات</span>
</a>
</div>
</section>
</div>مواصفات الميثاق المعماري (Architectural Contract)
التصنيف والهدف (Role & Category)
التصنيف: مكون معماري رسمي
الغرض: Primary action control triggering immediate state transition
المتغيرات المدعومة (Variants)
default, primary, secondary
تعتمد كلياً على فئات CSS المعيارية --qhr-* دون انحراف مفرداتي.
المقاسات المعيارية (Sizes)
sm, md, lg
متناسقة بصرياً وتدعم التكبير الهرمي المتوازن.
إمكانية الوصول (A11y Standards)
متوافق مع WCAG 2.1 AA بنسبة تباين تتجاوز 4.5:1.
دعم كامل للوحة المفاتيح ومؤشرات التركيز focus-visible.