Basic clickable component for handling user interaction.
There are two ways to display buttons:
ws-x attribute on a button element@@button marker to a label element<a> tags can also be displayed with a button style, but they will still act as anchors.
<div>
Buttons with a couple of different variants and colors
</div>
<ws-grid ws-x="[$content] [gr.cols repeat(3, 1fr)]">
<div ws-x="[col span 3]">Default Color / Disabled / Grounded</div>
<button ws-x="[$color @default] [$flat]">Flat</button>
<button ws-x="[$color @default] [$outline]">Outline</button>
<button ws-x="[$color @default] [$fill]">Fill</button>
<button disabled ws-x="[$color @default] [$flat]">Flat</button>
<button disabled ws-x="[$color @default] [$outline]">Outline</button>
<button disabled ws-x="[$color @default] [$fill]">Fill</button>
<button ws-x="[$color @default] [$ground] [$flat]">Flat</button>
<button ws-x="[$color @default] [$ground] [$outline]">Outline</button>
<button ws-x="[$color @default] [$ground] [$fill]">Fill</button>
<div ws-x="[col span 3]">Primary Color / Disabled / Grounded</div>
<button ws-x="[$color @primary] [$flat]">Flat</button>
<button ws-x="[$color @primary] [$outline]">Outline</button>
<button ws-x="[$color @primary] [$fill]">Fill</button>
<button disabled ws-x="[$color @primary] [$flat]">Flat</button>
<button disabled ws-x="[$color @primary] [$outline]">Outline</button>
<button disabled ws-x="[$color @primary] [$fill]">Fill</button>
<button ws-x="[$color @primary] [$ground] [$flat]">Flat</button>
<button ws-x="[$color @primary] [$ground] [$outline]">Outline</button>
<button ws-x="[$color @primary] [$ground] [$fill]">Fill</button>
<div ws-x="[col span 3]">Secondary Color / Disabled / Grounded</div>
<button ws-x="[$color @secondary] [$flat]">Flat</button>
<button ws-x="[$color @secondary] [$outline]">Outline</button>
<button ws-x="[$color @secondary] [$fill]">Fill</button>
<button disabled ws-x="[$color @secondary] [$flat]">Flat</button>
<button disabled ws-x="[$color @secondary] [$outline]">Outline</button>
<button disabled ws-x="[$color @secondary] [$fill]" disabled>Fill</button>
<button ws-x="[$color @secondary] [$ground] [$flat]">Flat</button>
<button ws-x="[$color @secondary] [$ground] [$outline]">Outline</button>
<button ws-x="[$color @secondary] [$ground] [$fill]">Fill</button>
<div ws-x="[col span 3]">Danger Color / Disabled / Grounded</div>
<button ws-x="[$color @danger] [$flat]">Flat</button>
<button ws-x="[$color @danger] [$outline]">Outline</button>
<button ws-x="[$color @danger] [$fill]">Fill</button>
<button disabled ws-x="[$color @danger] [$flat]">Flat</button>
<button disabled ws-x="[$color @danger] [$outline]">Outline</button>
<button disabled ws-x="[$color @danger] [$fill]">Fill</button>
<button ws-x="[$color @danger] [$ground] [$flat]">Flat</button>
<button ws-x="[$color @danger] [$ground] [$outline]">Outline</button>
<button ws-x="[$color @danger] [$ground] [$fill]">Fill</button>
<div ws-x="[col span 3]">Warning Color / Disabled / Grounded</div>
<button ws-x="[$color @warning] [$flat]">Flat</button>
<button ws-x="[$color @warning] [$outline]">Outline</button>
<button ws-x="[$color @warning] [$fill]">Fill</button>
<button disabled ws-x="[$color @warning] [$flat]">Flat</button>
<button disabled ws-x="[$color @warning] [$outline]">Outline</button>
<button disabled ws-x="[$color @warning] [$fill]">Fill</button>
<button ws-x="[$color @warning] [$ground] [$flat]">Flat</button>
<button ws-x="[$color @warning] [$ground] [$outline]">Outline</button>
<button ws-x="[$color @warning] [$ground] [$fill]">Fill</button>
<div ws-x="[col span 3]">Accent Color / Disabled / Grounded</div>
<button ws-x="[$color @accent] [$flat]">Flat</button>
<button ws-x="[$color @accent] [$outline]">Outline</button>
<button ws-x="[$fill] [$color @accent]">Fill</button>
<button disabled ws-x="[$color @accent] [$flat]">Flat</button>
<button disabled ws-x="[$color @accent] [$outline]">Outline</button>
<button disabled ws-x="[$fill] [$color @accent]">Fill</button>
<button ws-x="[$color @accent] [$ground] [$flat]">Flat</button>
<button ws-x="[$color @accent] [$ground] [$outline]">Outline</button>
<button ws-x="[$color @accent] [$ground] [$fill]">Fill</button>
</ws-grid>