انتقل إلى المحتوى
uiify

إطار العمل

Next.jsTanStack StartAstroVike

التنسيق

CSSTailwind

المظهر

اللغة

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)

Button

زر إجراء بأنماط وأحجام متعددة، منها زر الأيقونة وحدها.

المتصفحات
Chrome 123+Firefox 121+Safari 17.5+
الفئة
0
الحجم المضغوط
340 B
ميزانية التخطيط القسري
0 ms
ميزانية axe
0
متوافق مع SSR
نعم
العقد المنشور
بيئة الاختبار

المختبر

افتراضي

ثانوي

محدد

شفاف

مدمر

رابط

جارٍ التحميل

أمثلة

Variants

Pick a variant by emphasis. The default is the filled primary action — use one per view. secondary is a tonal fill for supporting actions, outline a bordered one, ghost shows a surface only on hover, destructive marks irreversible actions and link reads as inline text.

import { Button } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Button>Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="link">Link</Button>
    </>
  );
}

Sizes

sm is 32 px tall with 14 px text, md 44 px with 16 px and lg 56 px with 18 px. Omitting size gives md. Size and variant are independent, so every variant comes in every size.

import { Button } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </>
  );
}

With an icon

Put an icon next to the label as a child; the button spaces them 6 px apart. Mark decorative icons aria-hidden so the label stays the accessible name.

import { Button } from "@gunkin/uiify";

const plus = (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
  </svg>
);

export default function Example() {
  return (
    <>
      <Button>{plus}Create</Button>
      <Button variant="secondary">{plus}Create</Button>
      <Button variant="outline">{plus}Create</Button>
    </>
  );
}

Icon only

A button is never narrower than it is tall. The icon-sm, icon and icon-lg sizes drop the side padding, so a single icon sits in a 32, 44 or 56 px circle. There is no visible text, so always add an aria-label.

import { Button } from "@gunkin/uiify";

const plus = (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
  </svg>
);
const close = (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
  </svg>
);

export default function Example() {
  return (
    <>
      <Button size="icon-sm" aria-label="Create">{plus}</Button>
      <Button size="icon" aria-label="Create">{plus}</Button>
      <Button size="icon-lg" aria-label="Create">{plus}</Button>
      <Button variant="secondary" size="icon" aria-label="Create">{plus}</Button>
      <Button variant="outline" size="icon" aria-label="Create">{plus}</Button>
      <Button variant="ghost" size="icon" aria-label="Close">{close}</Button>
    </>
  );
}

Selected

selected marks the chosen item of a set or a toggle that is on, in any variant, with the primary fill. Pass selected={false} for the off state of a toggle so it is still announced as one. Toggle, Toggle group, Segmented control, Pagination and Toolbar use this same state.

import { Button } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Button variant="outline" selected>Bold</Button>
      <Button variant="outline" selected={false}>Italic</Button>
      <Button variant="ghost" selected>Bold</Button>
      <Button variant="ghost" selected={false}>Italic</Button>
    </>
  );
}

Disabled

disabled sets the native attribute on a <button>: it leaves the tab order, ignores clicks and shows no hover or pressed state. On any other element it sets aria-disabled and blocks activation instead.

import { Button } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Button disabled>Default</Button>
      <Button variant="secondary" disabled>Secondary</Button>
      <Button variant="outline" disabled>Outline</Button>
      <Button variant="destructive" disabled>Destructive</Button>
    </>
  );
}

API

Button

الخاصيةالنوعافتراضيالوصف
variant"secondary" | "outline" | "ghost" | "destructive" | "link"—درجة الإبراز البصري، وتُكتب في data-variant. احذفها للإجراء الرئيسي ذي التعبئة اللونية.
size"sm" | "md" | "lg" | "icon-sm" | "icon" | "icon-lg"—الارتفاع والحشو عبر data-size (اثنان وثلاثون أو أربعة وأربعون أو ستة وخمسون بكسلًا؛ والافتراضي md)؛ وتحذف أحجام الأيقونة الحشو الجانبي وتحتاج إلى aria-label.
selectedboolean—يعيّن data-selected لعنصر مختار أو زر تبديل فعّال؛ ويحصل <button> الأصلي أيضًا على aria-pressed ما لم تُحدّد حالة ARIA أخرى.
disabledbooleanfalseيعطّل الزر: بالسمة الأصلية في <button>، وبـ aria-disabled مع منع التفعيل في أي عنصر آخر.
type"button" | "submit" | "reset""button"نوع الزر الأصلي، ويُطبّق فقط إذا كان العنصر المعروض <button>. عيّنه إلى "submit" داخل نموذج.
asElementType"button"العنصر أو المكوّن المطلوب عرضه، مثل "a" أو Link من الموجّه. يتلقى جميع الخصائص والمرجع.
renderReactElement | ((props, state) => ReactElement)—استبدل العنصر المعروض مع الحفاظ على توصيلات السلوك وإمكانية الوصول.

لوحة المفاتيح

المفتاحالإجراء
Enter / Spaceتفعيل
Tabتركيز

إمكانية الوصول

يعرض عنصرًا أصليًا <button type="button">: يوفّر المتصفح التركيز وEnter وSpace، ولا يرسل نموذجًا عن طريق الخطأ. ومع as أو render يحتفظ بدور العنصر المختار، فيظل الرابط رابطًا. تكون disabled أصلية على الأزرار، وتُستخدم aria-disabled مع tabindex="-1" في غيرها. تتحول selected إلى aria-pressed؛ ويحتاج الرابط المحدّد إلى aria-current. تحتاج الأزرار التي تقتصر على أيقونة إلى aria-label.

نقاط التنسيق

data-uiify-buttondata-disableddata-selecteddata-variantdata-size--uiify-button-wash (colour of the glow in the upper half)--uiify-button-rim (colour of the top edge highlight)