CloseButton 关闭按钮

用于关闭对话框、抽屉与提示的按钮。

有新版本可用

刷新页面后即可使用最新功能。

import { Card, CloseButton, Heading, Inline, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Card padded className="w-full max-w-sm">
      <Inline align="start" justify="between" wrap={false} className="gap-4">
        <Stack gap="xs">
          <Heading level={3} size="sm">
            有新版本可用
          </Heading>
          <Text tone="muted" size="sm">
            刷新页面后即可使用最新功能。
          </Text>
        </Stack>
        <CloseButton className="-mt-1.5 -me-1.5 shrink-0" />
      </Inline>
    </Card>
  )
}

tsx

用法

import { CloseButton } from '@hina-ui/react'

组件已经内置了图标与无障碍名称，因此不需要传入任何属性。默认名称为“关闭”，传入 onClick 即可。

import { CloseButton } from '@hina-ui/react'

export default function Demo() {
  return <CloseButton />
}

tsx

示例

尺寸

默认为 sm。关闭按钮通常位于标题行或者卡片的右上角，sm 与相邻文字的高度最为接近。如果界面以触摸操作为主，可以适当放大按钮。xs 用于行内的小控件内部，例如 Chip 的移除按钮。

import { CloseButton, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline align="center">
      <CloseButton size="xs" />
      <CloseButton size="sm" />
      <CloseButton size="md" />
      <CloseButton size="lg" />
    </Inline>
  )
}

tsx

默认不显示提示。把名称改写为更具体的动作后可以打开它，并通过 side 指定出现的方向。

import { CloseButton, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline align="center">
      <CloseButton tooltip />
      <CloseButton label="关闭预览" tooltip side="right" />
    </Inline>
  )
}

tsx

不可用

设置 disabled 之后，按钮无法点击，也无法通过键盘聚焦。表单提交期间通常需要禁止关闭。

import { CloseButton } from '@hina-ui/react'

export default function Demo() {
  return <CloseButton disabled />
}

tsx

外观

组件不开放变体、色调与形状，它们固定为 ghost 变体、neutral 色调与圆形，图标固定为 X。

如果需要其他外观或者其他图标，请直接使用 IconButton。

对话框与提示

Dialog、Drawer 与 Toast 已经在标题行的右侧放置了关闭按钮，不需要重复添加。当 Dialog 与 Drawer 设置了 locked 时，内置的关闭按钮会同时被禁用。

'use client'

import { Button, Dialog, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Dialog
      title="导出数据"
      description="选择一种格式，导出当前的筛选结果。"
      renderContent={() => <Text tone="muted">右上角的关闭按钮由 Dialog 内置，无需重复添加。</Text>}
    >
      <Button variant="outline" tone="neutral">
        打开对话框
      </Button>
    </Dialog>
  )
}

tsx

API

Props

属性	类型	默认值	说明
`label`	`string`	关闭	按钮的无障碍名称，同时作为提示文字
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	尺寸
`tooltip`	`boolean`	`false`	是否显示提示
`disabled`	`boolean`	`false`	是否不可用
`className`	`string`	—	追加至按钮的类名

其余属性都会传递给 IconButton，例如通过 side 指定提示的方向。