Your button
Keep the element. Add the class. It comes back with a soft face and a press.
class="btn"
One material
The controlgives a little.
Soft controls. Pick eight colors. The rest of the set follows.
Try a solid
Primary
Still on the desk
Nothing has been sent yet.
Studio note
PrimaryEvery color, the same press
Drop it on your markup
One stylesheet, then a class on the element. Press it and it gives.
Your colors
Name eight colors once. Buttons, fields, and badges in that color stay in the same material.
--color-success
Your utilities
Tailwind still applies. Widen it, pad it, or lay it out. The press stays.
btn w-full
The set
Every color on one pageButton
The main action, with a soft raised press.
Icon button
The same press, for an icon alone.
Input
A soft field. The label rises as you type.
Textarea
The same field, when one line is not enough.
Select
A native menu, wrapped in the same soft field.
Checkbox
A small mark that fills when it is chosen.
Radio
One choice in a group, in the color you set.
Switch
On and off, with the same soft travel.
Slider
Drag along a soft track. The fill is your color.
Alert
A status line that stays easy to read.
Badge
A small label in any of the eight colors.
Card
A quiet panel for grouping what sits together.
Dialog
A real dialog, with a jelly panel inside.