Button

Colors

Button colors.

Preview

Code

HTML

Code

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>

Variants

Solid

Preview

Code

HTML

Code

JSX/TSX

<button class="btn solid success">Solid</button>

<button className='btn solid success'>
  Solid
</button>

Outline

Preview

Code

HTML

Code

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>

Ghost

Preview

Code

HTML

Code

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>

Light

Preview

Code

HTML

Code

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>

Group

Preview

Code

HTML

Code

JSX/TSX

<div class="grid gap-4">
	<div class="btn-group scrollable success">
		<button class="btn solid">success</button>
		<button class="btn solid">scrollable</button>
		<button class="btn solid">success</button>
		<button class="btn solid">btn-group</button>
	</div>
	<div class="btn-group scrollable vertical success">
		<button class="btn solid">vertical</button>
		<button class="btn solid">scrollable</button>
		<button class="btn solid">btn-group</button>
		<button class="btn solid">success</button>
	</div>
	<div class="btn-group scrollable pill success">
		<button class="btn solid">success</button>
		<button class="btn solid">pill</button>
		<button class="btn solid">scrollable</button>
		<button class="btn solid">btn-group</button>
	</div>
	<div class="btn-group scrollable warn">
		<button class="btn solid">warn</button>
		<button class="btn solid">scrollable</button>
		<button class="btn solid active">active</button>
		<button class="btn solid">btn-group</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'>
      success
    </button>
    <button className='btn solid'>
      scrollable
    </button>
    <button className='btn solid'>
      success
    </button>
    <button className='btn solid'>
      btn-group
    </button>
  </div>
  <div className='btn-group scrollable vertical success'>
    <button className='btn solid'>
      vertical
    </button>
    <button className='btn solid'>
      scrollable
    </button>
    <button className='btn solid'>
      btn-group
    </button>
    <button className='btn solid'>
      success
    </button>
  </div>
  <div className='btn-group scrollable pill success'>
    <button className='btn solid'>
      success
    </button>
    <button className='btn solid'>
      pill
    </button>
    <button className='btn solid'>
      scrollable
    </button>
    <button className='btn solid'>
      btn-group
    </button>
  </div>
  <div className='btn-group scrollable warn'>
    <button className='btn solid'>
      warn
    </button>
    <button className='btn solid'>
      scrollable
    </button>
    <button className='btn solid active'>
      active
    </button>
    <button className='btn solid'>
      btn-group
    </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>

Radio Typed Group

Preview

Code

HTML

Code

JSX/TSX

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

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

Enhanced Style

Compact

Usually use as Icon Button.

Preview

Code

HTML

Code

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>

Pill

Preview

Code

HTML

Code

JSX/TSX

<button class="btn solid success pill">A Pill Button</button>

<button className='btn solid success pill'>
  A Pill Button
</button>

Loading

Preview

Code

HTML

Code

JSX/TSX

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

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

Disabled

Preview

Code

HTML

Code

JSX/TSX

<button class="btn solid success" disabled="{true}">
	<p>disabled</p>
</button>

<button className='btn solid success'
  disabled={true}>
  <p>
    disabled
  </p>
</button>

Slot

Preview

Code

HTML

Code

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>Left Icon Button</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>
    Left Icon Button
  </p>
</button>

Sizes

Preview

Code

HTML

Code

JSX/TSX

<div class="grid gap-2">
	<div class="flex gap-2 flex-wrap">
		<button class="btn solid success xs">XS</button>
		<button class="btn solid success sm">SM</button>
		<button class="btn solid success md">MD</button>
		<button class="btn solid success lg">LG</button>
		<button class="btn solid success xl">XL</button>
	</div>
	<div class="flex gap-2 flex-wrap">
		<button class="btn outline danger xs">Outline xs</button>
		<button class="btn outline danger sm">Outline sm</button>
		<button class="btn outline danger md">Outline md</button>
		<button class="btn outline danger lg">Outline lg</button>
		<button class="btn outline danger xl">Outline xl</button>
	</div>
</div>

<div className='grid gap-2'>
  <div className='flex gap-2 flex-wrap'>
    <button className='btn solid success xs'>
      XS
    </button>
    <button className='btn solid success sm'>
      SM
    </button>
    <button className='btn solid success md'>
      MD
    </button>
    <button className='btn solid success lg'>
      LG
    </button>
    <button className='btn solid success xl'>
      XL
    </button>
  </div>
  <div className='flex gap-2 flex-wrap'>
    <button className='btn outline danger xs'>
      Outline xs
    </button>
    <button className='btn outline danger sm'>
      Outline sm
    </button>
    <button className='btn outline danger md'>
      Outline md
    </button>
    <button className='btn outline danger lg'>
      Outline lg
    </button>
    <button className='btn outline danger xl'>
      Outline xl
    </button>
  </div>
</div>

Classes

Class Name	Description
button	Wrapper htmlFor button
solid	Set solid style
outline	Set outline style
light	Set light style
ghost	Set ghost style
compact	Set compact style (The padding in the horizontal and vertical directions is the same, usually used as icon button)
pill	Set pill corner style
btn-group	Wrapper htmlFor button group
vertical	Set button group vertical align (default is horizontal)
scrollable	Set button group scrollable
is-loading	Add loading indicator for button
xs	Set extra small size
sm	Set small size
md	Set medium size
lg	Set large size
xl	Set extra large size

Breadcrumbs Checkbox