LinkButton 链接按钮 - Heroui

导入

tsx

import { LinkButton } from 'heroui-native';

结构

tsx

<LinkButton>
  <LinkButton.Label>...</LinkButton.Label>
</LinkButton>

LinkButton：根级可按压容器。内部渲染 variant="ghost" 的 Button，并强制关闭高亮反馈；使用者无法覆盖上述行为。
LinkButton.Label：链接按钮文字，继承父级上下文中的尺寸与变体样式。

用法

基础用法

行内链接风格文字，响应按压。

tsx

<LinkButton onPress={handlePress}>了解更多</LinkButton>

尺寸

使用 size 控制文字尺寸。

tsx

<LinkButton size="sm">
  小
</LinkButton>

<LinkButton size="md">
  中
</LinkButton>

<LinkButton size="lg">
  大
</LinkButton>

禁用状态

禁用后不可交互。

tsx

<LinkButton isDisabled>已禁用的链接</LinkButton>

自定义样式

在根与 Label 上使用 className。

tsx

<LinkButton className="px-2">
  <LinkButton.Label className="text-accent underline">
    样式化链接
  </LinkButton.Label>
</LinkButton>

与正文混排

与普通文字混排，用于条款、政策或上下文导航。

tsx

<View className="flex-row flex-wrap">
  <Text className="text-sm text-muted">我同意 </Text>
  <LinkButton size="sm" onPress={handleTermsPress}>
    <LinkButton.Label className="text-accent">
      服务条款
    </LinkButton.Label>
  </LinkButton>
  <Text className="text-sm text-muted"> 与 </Text>
  <LinkButton size="sm" onPress={handlePrivacyPress}>
    <LinkButton.Label className="text-accent">隐私政策</LinkButton.Label>
  </LinkButton>
</View>

示例

tsx

import { Button, Checkbox, ControlField, LinkButton } from 'heroui-native';
import React from 'react';
import { Alert, View, Text } from 'react-native';

export default function LinkButtonExample() {
  const [isAgreed, setIsAgreed] = React.useState(false);

  const handleTermsPress = () => Alert.alert('条款', '跳转至服务条款');
  const handlePrivacyPress = () =>
    Alert.alert('隐私', '跳转至隐私政策');

  return (
    <View className="flex-1 px-5 items-center justify-center">
      <View className="w-full max-w-xs gap-6">
        <ControlField
          isSelected={isAgreed}
          onSelectedChange={setIsAgreed}
          className="items-start"
        >
          <ControlField.Indicator>
            <Checkbox className="mt-0.5" />
          </ControlField.Indicator>
          <View className="flex-row flex-wrap flex-1">
            <Text className="text-sm text-muted">我同意 </Text>
            <LinkButton size="sm" onPress={handleTermsPress}>
              <LinkButton.Label className="text-accent">
                服务条款
              </LinkButton.Label>
            </LinkButton>
            <Text className="text-sm text-muted"> 与 </Text>
            <LinkButton size="sm" onPress={handlePrivacyPress}>
              <LinkButton.Label className="text-accent">
                隐私政策
              </LinkButton.Label>
            </LinkButton>
          </View>
        </ControlField>
        <Button isDisabled={!isAgreed}>注册</Button>
      </View>
    </View>
  );
}

更多示例见 GitHub 仓库。

API 参考

LinkButton

继承 Button 的全部属性，除 variant 外（内部固定为 ghost）。

内部强制行为：

override	value	description
`variant`	`ghost`	始终为 ghost，不可修改
`highlight`	`false`	高亮反馈关闭，不可修改
`className`	`h-auto p-0`	移除默认按钮高度与内边距

LinkButton.Label

与 Button.Label 等价，属性相同。