跳至正文
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设置高度和内边距（32、44或56 px，默认为md）；图标尺寸去除侧边内边距，需提供aria-label。
selectedboolean—为选中项或激活的切换按钮设置data-selected；原生<button>未指定其他ARIA状态时，还会设置aria-pressed。
disabledbooleanfalse禁用按钮：<button>使用原生属性，其他元素使用aria-disabled并阻止激活。
type"button" | "submit" | "reset""button"原生按钮类型，仅在渲染元素为<button>时应用。表单内设为"submit"。
asElementType"button"要渲染的元素或组件，例如"a"或路由Link。它接收全部props和ref。
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)
本页由机器翻译，尚未经人工审核。