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>

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>

Sizes

Preview

Code

HTML

Code

JSX/TSX

<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 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>

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>

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</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">success</button>
		<button class="btn solid">success</button>
		<button class="btn solid">success</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
    </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'>
      success
    </button>
    <button className='btn solid'>
      success
    </button>
    <button className='btn solid'>
      success
    </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="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>

Loading

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-2 flex-wrap">
	<button class="btn solid success is-loading">is-loading</button>
	<button class="btn outline success is-loading">is-loading</button>
</div>

<div className='flex gap-2 flex-wrap'>
  <button className='btn solid success is-loading'>
    is-loading
  </button>
  <button className='btn outline success is-loading'>
    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>

Breadcrumbs Checkbox