如何实现Chakra UI图标按钮在md断点以上显示文本？

架构老林

2026-7-25

在Chakra UI中用单个组件实现仅md断点以上显示文本的图标按钮

可以只用单个<Button>组件实现，不需要在Button和IconButton之间切换，核心是通过响应式样式适配两种状态的外观：

实现思路

控制文本显示：在md断点以下隐藏按钮文本，断点以上正常显示
匹配IconButton样式：无文本状态下，将Button的圆角设为全圆角，尺寸调整为icon规格，和原生IconButton保持一致
带文本状态下保留Button默认样式

代码示例

方式1：直接用Chakra响应式属性（推荐）

import { Button } from '@chakra-ui/react';
import { EmailIcon } from '@chakra-ui/icons';

<Button
  leftIcon={<EmailIcon />}
  sx={{
    // 控制文本容器的显示逻辑：md以下隐藏
    '& .chakra-button__content': {
      display: { base: 'none', md: 'inline-flex' },
    },
    // 响应式圆角：md以下用全圆角（和IconButton一致）
    borderRadius: { base: 'full', md: 'md' },
    // 响应式尺寸：md以下使用IconButton的尺寸规格
    size: { base: 'icon', md: 'md' },
  }}
>
  Email
</Button>

方式2：用`useBreakpointValue`手动判断断点

import { Button, useBreakpointValue } from '@chakra-ui/react';
import { EmailIcon } from '@chakra-ui/icons';

const isMd = useBreakpointValue({ base: false, md: true });

<Button
  leftIcon={<EmailIcon />}
  iconSpacing={isMd ? 2 : 0}
  borderRadius={isMd ? 'md' : 'full'}
  size={isMd ? 'md' : 'icon'}
>
  <span style={{ display: isMd ? 'inline' : 'none' }}>Email</span>
</Button>