Button

Button Demo

Usage

HTML

<button class="btn-green">Default</button>
<button class="btn-outline-red">Outline</button>
<button class="btn-soft-sky">Soft</button>
<button class="btn-ghost-yellow">Ghost</button>
<button class="btn-link-pink">Link</button>

JSX

<button className="btn-green">Default</button>
<button className="btn-outline-red">Outline</button>
<button className="btn-soft-sky">Soft</button>
<button className="btn-ghost-yellow">Ghost</button>
<button className="btn-link-pink">Link</button>

Rules

base rules

/^btn-(?:outline|soft|ghost|link|black)-((rose|pink|fuchsia|purple|violet|indigo|blue|sky|cyan|teal|emerald|green|lime|yellow|amber|orange|red|gray|slate|zinc|neutral|stone|light|dark|lightblue|warmgray|truegray|coolgray|bluegray))$/

size rules

/^btn-((2xs|xs|sm|md|lg|xl))$/