按钮

颜色

演示

代码

HTML

代码

JSX/TSX

<div class="flex flex-wrap gap-2">
	<button class="btn solid bw">BW</button>
	<button class="btn solid info">Info</button>
	<button class="btn solid success">Success</button>
	<button class="btn solid warn">Warn</button>
	<button class="btn solid danger">Danger</button>
</div>

<div className='flex flex-wrap gap-2'>
  <button className='btn solid bw'>
    BW
  </button>
  <button className='btn solid info'>
    Info
  </button>
  <button className='btn solid success'>
    Success
  </button>
  <button className='btn solid warn'>
    Warn
  </button>
  <button className='btn solid danger'>
    Danger
  </button>
</div>

变体

实体按钮

演示

代码

HTML

代码

JSX/TSX

<button class="btn solid success">实体按钮</button>

<button className='btn solid success'>
  实体按钮
</button>

轮廓按钮

演示

代码

HTML

代码

JSX/TSX

<div class="flex flex-wrap gap-2">
	<button class="btn outline bw">BW</button>
	<button class="btn outline info">Info</button>
	<button class="btn outline success">Success</button>
	<button class="btn outline warn">Warn</button>
	<button class="btn outline danger">Danger</button>
</div>

<div className='flex flex-wrap gap-2'>
  <button className='btn outline bw'>
    BW
  </button>
  <button className='btn outline info'>
    Info
  </button>
  <button className='btn outline success'>
    Success
  </button>
  <button className='btn outline warn'>
    Warn
  </button>
  <button className='btn outline danger'>
    Danger
  </button>
</div>

幽灵按钮

演示

代码

HTML

代码

JSX/TSX

<div class="flex flex-wrap gap-2">
	<button class="btn ghost bw">BW</button>
	<button class="btn ghost info">Info</button>
	<button class="btn ghost success">Success</button>
	<button class="btn ghost warn">Warn</button>
	<button class="btn ghost danger">Danger</button>
</div>

<div className='flex flex-wrap gap-2'>
  <button className='btn ghost bw'>
    BW
  </button>
  <button className='btn ghost info'>
    Info
  </button>
  <button className='btn ghost success'>
    Success
  </button>
  <button className='btn ghost warn'>
    Warn
  </button>
  <button className='btn ghost danger'>
    Danger
  </button>
</div>

轻量按钮

演示

代码

HTML

代码

JSX/TSX

<div class="flex flex-wrap gap-2">
	<button class="btn light bw">BW</button>
	<button class="btn light info">Info</button>
	<button class="btn light success">Success</button>
	<button class="btn light warn">Warn</button>
	<button class="btn light danger">Danger</button>
</div>

<div className='flex flex-wrap gap-2'>
  <button className='btn light bw'>
    BW
  </button>
  <button className='btn light info'>
    Info
  </button>
  <button className='btn light success'>
    Success
  </button>
  <button className='btn light warn'>
    Warn
  </button>
  <button className='btn light danger'>
    Danger
  </button>
</div>

按钮组

演示

代码

HTML

代码

JSX/TSX

<div class="grid gap-4">
	<div class="btn-group scrollable success">
		<button class="btn solid">Sira</button>
		<button class="btn solid">可滚动的</button>
		<button class="btn solid">成功状态</button>
		<button class="btn solid">按钮组</button>
	</div>
	<div class="btn-group scrollable vertical success">
		<button class="btn solid">Sira</button>
		<button class="btn solid">可滚动的</button>
		<button class="btn solid">垂直方向</button>
		<button class="btn solid">按钮组</button>
	</div>
	<div class="btn-group scrollable pill success">
		<button class="btn solid">Sira</button>
		<button class="btn solid">可滚动的</button>
		<button class="btn solid">胶囊药片</button>
		<button class="btn solid">按钮组</button>
	</div>
	<div class="btn-group scrollable warn">
		<button class="btn solid">Sira</button>
		<button class="btn solid">可滚动的</button>
		<button class="btn solid active">强制激活状态</button>
		<button class="btn solid">按钮组</button>
	</div>
	<div class="btn-group scrollable danger">
		<input class="btn solid" data-content="1" name="options" type="radio" />
		<input class="btn solid" data-content="2" name="options" type="radio" />
		<input class="btn solid" data-content="3" name="options" type="radio" />
		<input class="btn solid" data-content="4" name="options" type="radio" />
	</div>
</div>

<div className='grid gap-4'>
  <div className='btn-group scrollable success'>
    <button className='btn solid'>
      Sira
    </button>
    <button className='btn solid'>
      可滚动的
    </button>
    <button className='btn solid'>
      成功状态
    </button>
    <button className='btn solid'>
      按钮组
    </button>
  </div>
  <div className='btn-group scrollable vertical success'>
    <button className='btn solid'>
      Sira
    </button>
    <button className='btn solid'>
      可滚动的
    </button>
    <button className='btn solid'>
      垂直方向
    </button>
    <button className='btn solid'>
      按钮组
    </button>
  </div>
  <div className='btn-group scrollable pill success'>
    <button className='btn solid'>
      Sira
    </button>
    <button className='btn solid'>
      可滚动的
    </button>
    <button className='btn solid'>
      胶囊药片
    </button>
    <button className='btn solid'>
      按钮组
    </button>
  </div>
  <div className='btn-group scrollable warn'>
    <button className='btn solid'>
      Sira
    </button>
    <button className='btn solid'>
      可滚动的
    </button>
    <button className='btn solid active'>
      强制激活状态
    </button>
    <button className='btn solid'>
      按钮组
    </button>
  </div>
  <div className='btn-group scrollable danger'>
    <input className='btn solid'
      data-content='1'
      name='options'
      type='radio' />
    <input className='btn solid'
      data-content='2'
      name='options'
      type='radio' />
    <input className='btn solid'
      data-content='3'
      name='options'
      type='radio' />
    <input className='btn solid'
      data-content='4'
      name='options'
      type='radio' />
  </div>
</div>

单选式按钮组

演示

代码

HTML

代码

JSX/TSX

<div class="btn-group scrollable danger">
	<input class="btn solid" data-content="选项1" name="options" type="radio" />
	<input class="btn solid" data-content="选项2" name="options" type="radio" />
	<input class="btn solid" data-content="选项3" name="options" type="radio" />
	<input class="btn solid" data-content="选项4" name="options" type="radio" />
</div>

<div className='btn-group scrollable danger'>
  <input className='btn solid'
    data-content='选项1'
    name='options'
    type='radio' />
  <input className='btn solid'
    data-content='选项2'
    name='options'
    type='radio' />
  <input className='btn solid'
    data-content='选项3'
    name='options'
    type='radio' />
  <input className='btn solid'
    data-content='选项4'
    name='options'
    type='radio' />
</div>

增强样式

紧凑按钮

通常用作图标按钮

演示

代码

HTML

代码

JSX/TSX

<div class="grid gap-4 place-content-start place-items-start">
	<button class="btn solid success compact xs">🎉</button>
	<button class="btn solid success compact sm">🎉</button>
	<button class="btn solid success compact">🎉</button>
	<button class="btn solid success compact lg">🎉</button>
	<button class="btn solid success compact xl">🎉</button>
</div>

<div className='grid gap-4 place-content-start place-items-start'>
  <button className='btn solid success compact xs'>
    🎉
  </button>
  <button className='btn solid success compact sm'>
    🎉
  </button>
  <button className='btn solid success compact'>
    🎉
  </button>
  <button className='btn solid success compact lg'>
    🎉
  </button>
  <button className='btn solid success compact xl'>
    🎉
  </button>
</div>

药片按钮

演示

代码

HTML

代码

JSX/TSX

<button class="btn solid success pill">药片按钮</button>

<button className='btn solid success pill'>
  药片按钮
</button>

加载中样式

演示

代码

HTML

代码

JSX/TSX

<div class="grid gap-4 place-content-start place-items-start">
	<button class="btn solid success is-loading">加载中</button>
	<button class="btn outline success is-loading">加载中</button>
	<button class="btn solid success is-loading xs">加载中</button>
	<button class="btn solid success is-loading sm">加载中</button>
	<button class="btn solid success is-loading md">加载中</button>
	<button class="btn solid success is-loading lg">加载中</button>
	<button class="btn solid success is-loading xl">加载中</button>
</div>

<div className='grid gap-4 place-content-start place-items-start'>
  <button className='btn solid success is-loading'>
    加载中
  </button>
  <button className='btn outline success is-loading'>
    加载中
  </button>
  <button className='btn solid success is-loading xs'>
    加载中
  </button>
  <button className='btn solid success is-loading sm'>
    加载中
  </button>
  <button className='btn solid success is-loading md'>
    加载中
  </button>
  <button className='btn solid success is-loading lg'>
    加载中
  </button>
  <button className='btn solid success is-loading xl'>
    加载中
  </button>
</div>

禁用状态按钮

演示

代码

HTML

代码

JSX/TSX

<button class="btn solid success" disabled="{true}">
	<p>禁用状态</p>
</button>

<button className='btn solid success'
  disabled={true}>
  <p>
    禁用状态
  </p>
</button>

插槽

演示

代码

HTML

代码

JSX/TSX

<button class="btn solid success">
	<svg
		xmlns="http://www.w3.org/2000/svg"
		class="icon icon-tabler icon-tabler-bell-plus-filled"
		width="24"
		height="24"
		viewBox="0 0 24 24"
		stroke-width="2"
		stroke="currentColor"
		fill="none"
		stroke-linecap="round"
		stroke-linejoin="round"
	>
		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
		<path
			d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z"
			stroke-width="0"
			fill="currentColor"
		/>
		<path
			d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004zm0 6a1 1 0 0 0 -1 1v1h-1l-.117 .007a1 1 0 0 0 .117 1.993h1v1l.007 .117a1 1 0 0 0 1.993 -.117v-1h1l.117 -.007a1 1 0 0 0 -.117 -1.993h-1v-1l-.007 -.117a1 1 0 0 0 -.993 -.883z"
			stroke-width="0"
			fill="currentColor"
		/>
	</svg>
	<p>左图标按钮</p>
</button>

<button className='btn solid success'>
  <svg xmlns='http://www.w3.org/2000/svg'
    className='icon icon-tabler icon-tabler-bell-plus-filled'
    width='24'
    height='24'
    viewBox='0 0 24 24'
    strokeWidth='2'
    stroke='currentColor'
    fill='none'
    strokeLinecap='round'
    strokeLinejoin='round'>
    <path stroke='none'
      d='M0 0h24v24H0z'
      fill='none' />
    <path d='M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z'
      strokeWidth='0'
      fill='currentColor' />
    <path d='M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004zm0 6a1 1 0 0 0 -1 1v1h-1l-.117 .007a1 1 0 0 0 .117 1.993h1v1l.007 .117a1 1 0 0 0 1.993 -.117v-1h1l.117 -.007a1 1 0 0 0 -.117 -1.993h-1v-1l-.007 -.117a1 1 0 0 0 -.993 -.883z'
      strokeWidth='0'
      fill='currentColor' />
  </svg>
  <p>
    左图标按钮
  </p>
</button>

尺寸

演示

代码

HTML

代码

JSX/TSX

<div class="grid gap-2">
	<div class="flex gap-2 flex-wrap">
		<button class="btn solid success xs">超小尺寸</button>
		<button class="btn solid success sm">较小尺寸</button>
		<button class="btn solid success md">中等尺寸</button>
		<button class="btn solid success lg">较大尺寸</button>
		<button class="btn solid success xl">超大尺寸</button>
	</div>
	<div class="flex gap-2 flex-wrap">
		<button class="btn outline danger xs">超小尺寸</button>
		<button class="btn outline danger sm">较小尺寸</button>
		<button class="btn outline danger md">中等尺寸</button>
		<button class="btn outline danger lg">较大尺寸</button>
		<button class="btn outline danger xl">超大尺寸</button>
	</div>
</div>

<div className='grid gap-2'>
  <div className='flex gap-2 flex-wrap'>
    <button className='btn solid success xs'>
      超小尺寸
    </button>
    <button className='btn solid success sm'>
      较小尺寸
    </button>
    <button className='btn solid success md'>
      中等尺寸
    </button>
    <button className='btn solid success lg'>
      较大尺寸
    </button>
    <button className='btn solid success xl'>
      超大尺寸
    </button>
  </div>
  <div className='flex gap-2 flex-wrap'>
    <button className='btn outline danger xs'>
      超小尺寸
    </button>
    <button className='btn outline danger sm'>
      较小尺寸
    </button>
    <button className='btn outline danger md'>
      中等尺寸
    </button>
    <button className='btn outline danger lg'>
      较大尺寸
    </button>
    <button className='btn outline danger xl'>
      超大尺寸
    </button>
  </div>
</div>

类名表

类名	描述
button	用于按钮的包装
solid	设置实体按钮样式
outline	设置框线按钮样式
ghost	设置幽灵按钮样式
light	设置轻量按钮样式
compact	设置紧凑按钮（水平方向与垂直方向的内边距相同，通常用作图标按钮）
pill	设置胶囊型按钮（圆角较大）
btn-group	用于按钮组的包装
vertical	设置按钮组垂直方向排列（默认为水平方向）
scrollable	设置按钮组可滚动
is-loading	按钮添加加载中样式
xs	设置超小尺寸
sm	设置较小尺寸
md	设置中等尺寸
lg	设置较大尺寸
xl	设置超大尺寸

面包屑复选框