Flint Workbench
Button workbench
Four variants, every state, as MUI, shadcn/ui and plain CSS. All three read the button component tokens.
Guidance and code: Button docs.
Known MUI gap
The MUI theme does not apply the secondary and disabled button tokens yet, and its buttons are 36px tall instead of 40px (ASDS-44).Primary
| State | MUI | shadcn | Plain CSS |
|---|---|---|---|
| Default | |||
| Hover | |||
| Focuskeyboard focus | |||
| Disabled | |||
| Livetry it |
Secondary
| State | MUI | shadcn | Plain CSS |
|---|---|---|---|
| Default | |||
| Hover | |||
| Focuskeyboard focus | |||
| Disabled | |||
| Livetry it |
Danger
| State | MUI | shadcn | Plain CSS |
|---|---|---|---|
| Default | |||
| Hover | |||
| Focuskeyboard focus | |||
| Disabled | |||
| Livetry it |
Text
| State | MUI | shadcn | Plain CSS |
|---|---|---|---|
| Default | |||
| Hover | |||
| Focuskeyboard focus | |||
| Disabled | |||
| Livetry it |