按钮 React 组件

按钮组件
按钮属性
示例

按钮组件

包含以下组件

Button - 单个按钮

按钮属性

名称	类型	默认值	描述
clear	布尔值	未定义	使按钮采用清晰样式（无填充颜色）。覆盖`clearIos`和`clearMaterial`属性
clearIos	布尔值	false	在 iOS 主题中使按钮采用清晰样式（无填充颜色）
clearMaterial	布尔值	false	在 Material 主题中使按钮采用清晰样式（无填充颜色）
colors	对象		带有 Tailwind CSS 颜色类的对象
colors.activeBgIos	字符串	'active:bg-primary'
colors.activeBgMaterial	字符串	''
colors.disabledBg	字符串	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.disabledBorder	字符串	'border-black border-opacity-10 dark:border-white dark:border-opacity-10'
colors.disabledText	字符串	'text-black text-opacity-30 dark:text-white dark:text-opacity-30'
colors.fillActiveBgIos	字符串	'active:bg-ios-primary-shade'
colors.fillActiveBgMaterial	字符串	''
colors.fillBgIos	字符串	'bg-primary'
colors.fillBgMaterial	字符串	'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos	字符串	'text-white'
colors.fillTextMaterial	字符串	'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipple	字符串	'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIos	字符串	'border-primary'
colors.outlineBorderMaterial	字符串	'border-md-light-outline dark:border-md-dark-outline'
colors.textIos	字符串	'text-primary'
colors.textMaterial	字符串	'text-md-light-primary dark:text-md-dark-primary'
colors.tonalBgIos	字符串	'bg-primary'
colors.tonalBgMaterial	字符串	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.tonalTextIos	字符串	'text-primary'
colors.tonalTextMaterial	字符串	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.touchRipple	字符串	'touch-ripple-primary'
component	字符串	'button'	组件的 HTML 元素
disabled	布尔值	false	使按钮禁用
href	字符串		链接的`href`属性，如果指定，也将被渲染为`<a>`元素
inline	布尔值	false	使按钮内联（例如`display: inline-flex`）
large	布尔值	未定义	使按钮变大。覆盖`largeIos`和`largeMaterial`属性
largeIos	布尔值	false	在 iOS 主题中使按钮变大
largeMaterial	布尔值	false	在 Material 主题中使按钮变大
outline	布尔值	未定义	使按钮轮廓。覆盖`outlineIos`和`outlineMaterial`属性
outlineIos	布尔值	false	在 iOS 主题中使按钮轮廓
outlineMaterial	布尔值	false	在 Material 主题中使按钮轮廓
raised	布尔值	未定义	使按钮凸起（带有阴影）。覆盖`raisedIos`和`raisedMaterial`属性
raisedIos	布尔值	false	在 iOS 主题中使按钮凸起（带有阴影）
raisedMaterial	布尔值	false	在 Material 主题中使按钮凸起（带有阴影）
rounded	布尔值	未定义	使按钮圆角。覆盖`roundedIos`和`roundedMaterial`属性
roundedIos	布尔值	false	在 iOS 主题中使按钮圆角
roundedMaterial	布尔值	false	在 Material 主题中使按钮圆角
segmented	布尔值	false	渲染分段按钮，与`<SegmentedButton>`相同
segmentedActive	布尔值	false	渲染分段活动按钮，与`<SegmentedButton active>`相同
segmentedStrong	布尔值	false	渲染分段强按钮，与`<SegmentedButton strong>`相同
small	布尔值	未定义	使按钮变小。覆盖`smallIos`和`smallMaterial`属性
smallIos	布尔值	false	在 iOS 主题中使按钮变小
smallMaterial	布尔值	false	在 Material 主题中使按钮变小
tonal	布尔值	未定义	使按钮采用色调样式（带有半透明填充颜色）。覆盖`tonalIos`和`tonalMaterial`属性
tonalIos	布尔值	false	在 iOS 主题中使按钮采用色调样式（带有半透明填充颜色）
tonalMaterial	布尔值	false	在 Material 主题中使按钮采用色调样式（带有半透明填充颜色）
touchRipple	布尔值	true	在 Material 主题中启用触摸涟漪效果

示例

Buttons.jsx

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Button,
  Block,
  BlockTitle,
} from 'konsta/react';

export default function ButtonsPage() {
  return (
    <Page>
      <Navbar
        title="Buttons"
        />

      <BlockTitle>Default Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button>Button</Button>
          <Button className="k-color-brand-red">Button</Button>
          <Button>Button</Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button outline>Outline</Button>
          <Button className="k-color-brand-red" outline>
            Outline
          </Button>
          <Button outline>Outline</Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button clear>Clear</Button>
          <Button className="k-color-brand-red" clear>
            Clear
          </Button>
          <Button clear>Clear</Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button tonal>Tonal</Button>
          <Button className="k-color-brand-red" tonal>
            Tonal
          </Button>
          <Button tonal>Tonal</Button>
        </div>
      </Block>

      <BlockTitle>Rounded Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button rounded>Button</Button>
          <Button rounded className="k-color-brand-green">
            Button
          </Button>
          <Button rounded>Button</Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button rounded outline>
            Outline
          </Button>
          <Button rounded outline className="k-color-brand-green">
            Outline
          </Button>
          <Button rounded outline>
            Outline
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button rounded clear>
            Clear
          </Button>
          <Button rounded clear className="k-color-brand-green">
            Clear
          </Button>
          <Button rounded clear>
            Clear
          </Button>
        </div>
      </Block>

      <BlockTitle>Large Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button large>Button</Button>
          <Button large className="k-color-brand-yellow">
            Button
          </Button>
          <Button large rounded>
            Button
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button large outline>
            Outline
          </Button>
          <Button large outline className="k-color-brand-yellow">
            Outline
          </Button>
          <Button large rounded outline>
            Outline
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button large clear>
            Clear
          </Button>
          <Button large clear className="k-color-brand-yellow">
            Clear
          </Button>
          <Button large rounded clear>
            Clear
          </Button>
        </div>
      </Block>

      <BlockTitle>Small Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button small>Button</Button>
          <Button small>Button</Button>
          <Button small rounded>
            Button
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button small outline>
            Outline
          </Button>
          <Button small outline>
            Outline
          </Button>
          <Button small rounded outline>
            Outline
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button small clear>
            Clear
          </Button>
          <Button small clear>
            Clear
          </Button>
          <Button small rounded clear>
            Clear
          </Button>
        </div>
      </Block>

      <BlockTitle>Raised Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button raised>Button</Button>
          <Button raised>Button</Button>
          <Button raised rounded>
            Button
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button raised outline>
            Outline
          </Button>
          <Button raised outline>
            Outline
          </Button>
          <Button raised rounded outline>
            Outline
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-x-4">
          <Button raised clear>
            Clear
          </Button>
          <Button raised clear>
            Clear
          </Button>
          <Button raised rounded clear>
            Clear
          </Button>
        </div>
      </Block>

      <BlockTitle>Disabled Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button disabled>Button</Button>
          <Button disabled outline>
            Outline
          </Button>
          <Button disabled clear>
            Clear
          </Button>
        </div>
      </Block>
    </Page>
  );
}