الزر

import { Button } from "@mercato/components";

<Button variant="primary">إرسال الطلبية</Button>
<Button variant="secondary" icon="add">إضافة</Button>
<Button variant="destructive">حذف</Button>
<Button variant="primary" loading>إرسال</Button>
<Button variant="primary" iconOnly icon="add" aria-label="إضافة" />

/* Pill button, authored from semantic tokens only. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-inline-sm);
  min-height: 44px;                               /* accessible touch target */
  padding: var(--spacing-inset-xs) var(--spacing-inset-lg);
  border: var(--border-base) solid transparent;
  border-radius: var(--shape-rounded);            /* Mercato buttons are pills */
  font-family: var(--type-label-md-strong-family);
  font-weight: var(--type-label-md-strong-weight);
  font-size: var(--type-label-md-strong-size);
  line-height: var(--type-label-md-strong-line-height);
  transition:
    background-color var(--motion-feedback-duration) var(--motion-feedback-easing),
    border-color var(--motion-feedback-duration) var(--motion-feedback-easing);
}

/* variant x state -> token */
.btn-primary                       { background: var(--color-bg-action-accent-primary-default); color: var(--color-fg-action-accent-on-color); }
.btn-primary:hover:not(:disabled)  { background: var(--color-bg-action-accent-primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--color-bg-action-accent-primary-pressed); }

.btn-secondary                     { background: transparent; color: var(--color-fg-action-accent-default);
                                     border-color: var(--color-border-action-accent-secondary-default); }
.btn-secondary:hover:not(:disabled){ background: var(--color-bg-action-accent-secondary-hover); }

.btn-destructive                   { background: var(--color-bg-action-negative-primary-default); color: var(--color-fg-action-negative-on-color); }
.btn-destructive:hover:not(:disabled){ background: var(--color-bg-action-negative-primary-hover); }

.btn:disabled                      { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible                 { outline: var(--border-focus) solid var(--color-focus-default); outline-offset: 2px; }