Button
A clickable button or link element. Toggle Vue / CSS to switch the live demo and source together.
Basic
Default colors across the palette.
Vue SFC
Sizes
xs, sm, md, lg, xl.
Vue SFC
Variants
Solid, outline, tonal and gradient.
Vue SFC
Shapes
Square (default) and pill.
Vue SFC
Text with icon
Icon slot with left or right position.
Vue SFC
States
Disabled, loading and full width (width="100%").
Vue SFC
Badges
Notification badge in four colors.
Vue SFC
Link buttons
Renders as <a> when href is set.
Vue SFC
Button type
button, submit, reset.
Vue SFC
Icon buttons
Icon-only buttons with optional badge or tooltip.
Vue SFC
FAB
Floating Action Button styles.
Vue SFC
Customized
Override per-element styling with the cssClass prop (Vue) or extra utility classes (CSS).
Vue SFC
Width & height
Set width, height, min-width, max-width, min-height or max-height — each takes a CSS string ("220px", "80%") or a number (px). Use width="100%" for a full-width button (replaces the old fullWidth).
Vue SFC
Types
Import
import { ButtonProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xs' | 'xl' | 'md' | Visual size of the button. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'dark' | 'light' | 'primary' | Color theme of the button. |
variant | 'solid' | 'outline' | 'tonal' | 'gradient' | 'solid' | Visual style variant (solid, outline, tonal, gradient). |
gradient | 'purple' | 'dark' | 'ocean' | 'mint' | 'sunset' | — | Gradient preset applied when variant is gradient. |
shape | 'square' | 'pill' | 'circle' | 'square' | Corner shape of the button (square, pill, circle). |
disabled | boolean | false | Disables interaction and dims the button. |
loading | boolean | false | Shows a loading state and blocks clicks. |
width | string | number | — | Explicit sizing. Each accepts a CSS length string (`"220px"`, `"80%"`) or a number (interpreted as px). Use `width="100%"` for a full-width button. |
height | string | number | — | — |
minWidth | string | number | — | — |
maxWidth | string | number | — | — |
minHeight | string | number | — | — |
maxHeight | string | number | — | — |
href | string | — | Renders the button as an anchor with this URL. |
target | string | — | Anchor target window when href is set. |
type | 'button' | 'submit' | 'reset' | 'button' | Native button type attribute. |
iconPosition | 'left' | 'right' | 'left' | Placement of the icon relative to the text. |
badge | string | — | Badge text shown on the button. |
badgeColor | 'red' | 'green' | 'orange' | 'cobalt' | 'red' | Color of the badge. |
iconOnly | boolean | false | Renders an icon-only button without text. |
fab | boolean | false | Styles the button as a floating action button. |
round | boolean | false | Applies fully rounded corners. |
circle | boolean | false | Renders the button as a circle. |
glass | boolean | false | Applies a translucent glass effect. |
tooltip | string | — | Tooltip text shown on hover. |
ariaLabelText | string | — | Accessible label text for screen readers. |
cssClass | ButtonCssClass | {} | Per-element class overrides. |