Badge

Shape

Default

Preview

Code

HTML

Code

JSX/TSX

badge

<div class="badge solid success">badge</div>

<div className='badge solid success'>
  badge
</div>

Square

Preview

Code

HTML

Code

JSX/TSX

square

<div class="badge solid success square">square</div>

<div className='badge solid success square'>
  square
</div>

Cornered

Preview

Code

HTML

Code

JSX/TSX

cornered

<div class="badge solid success cornered">cornered</div>

<div className='badge solid success cornered'>
  cornered
</div>

Variant

Solid

Preview

Code

HTML

Code

JSX/TSX

success

<div class="badge solid success">success</div>

<div className='badge solid success'>
  success
</div>

Outline

Preview

Code

HTML

Code

JSX/TSX

success

<div class="badge outline success">success</div>

<div className='badge outline success'>
  success
</div>

Light

Preview

Code

HTML

Code

JSX/TSX

success

<div class="badge light success">success</div>

<div className='badge light success'>
  success
</div>

Size

Preview

Code

HTML

Code

JSX/TSX

size-xs

size-sm

size-md

size-lg

size-xl

<div class="grid gap-4">
	<div class="badge solid success xs">size-xs</div>
	<div class="badge solid success sm">size-sm</div>
	<div class="badge solid success md">size-md</div>
	<div class="badge solid success lg">size-lg</div>
	<div class="badge solid success xl">size-xl</div>
</div>

<div className='grid gap-4'>
  <div className='badge solid success xs'>
    size-xs
  </div>
  <div className='badge solid success sm'>
    size-sm
  </div>
  <div className='badge solid success md'>
    size-md
  </div>
  <div className='badge solid success lg'>
    size-lg
  </div>
  <div className='badge solid success xl'>
    size-xl
  </div>
</div>

Avatar Breadcrumbs