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, xxl.
Vue SFC
Variants
Solid, outline, tonal and gradient. Pick a color to see how it combines with each one — solid fills with it, outline uses it for the border and text, tonal is a soft tint of the same hue.
gradient is the exception: it paints a preset ramp, so it takes a gradient name rather than a color, and has its own picker below.
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
Button with input
Buttons share the xs–xxl heights of the form controls, so they line up when paired inline.
Vue SFC
Throttle & debounce
Rate-limit clicks without writing a timer in your handler. throttle and debounce are backed by p-throttle and p-debounce, and each emits its own event when it actually executes.
Vue SFC
Both take the option object or a bare number shorthand (debounce="300"); a spinning button blocks, but a debounce still re-arms on repeat clicks so it runs once you stop.
Async loading
Bind the click's work as handler — its promise drives the button's own spinner, so there's no loading flag to manage. loading stays a read-only override, and mno-loading-change reports the self-driven state.
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
CSS Variables
Vue SFC
Themed through --mono-button-* custom properties (apply them on the element / inline — they win over the color×variant matrix and pierce the shadow boundary). Re-skin globally via the --theme-* tokens.
| Variable | Default | Controls |
|---|---|---|
--mono-button-primary | --theme-primary | Primary color (default gradient start) |
--mono-button-secondary | --theme-secondary | Default gradient end |
--mono-button-bg | primary→secondary gradient | Resolved background |
--mono-button-color | #fff | Resolved text color |
--mono-button-border-color | transparent | Resolved border color |
--mono-button-shadow | primary glow | Resolved shadow |
--mono-button-hover-bg | current bg | Hover background |
--mono-button-hover-shadow | primary glow | Hover shadow |
--mono-button-success / -danger / -warning / -info / -teal / -purple / -dark | matching --theme-* | Per-color base |
--mono-button-<color>-soft / -lite | 10% / 24% of the color | Tonal fill and border at rest |
--mono-button-<color>-soft-hover / -lite-hover | 20% / 32% of the color | Tonal fill and border on hover |
Types
Import
import { ButtonProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | — | Visual size of the button. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'dark' | 'light' | — | Color theme of the button. |
variant | 'solid' | 'outline' | 'tonal' | 'gradient' | — | Visual style variant (solid, outline, tonal, gradient). |
gradient | 'purple' | 'dark' | 'ocean' | 'mint' | 'sunset' | — | Gradient preset applied when variant is gradient. |
shape | 'square' | 'pill' | 'circle' | — | Corner shape of the button (square, pill, circle). |
disabled | boolean | — | Disables interaction and dims the button. |
loading | boolean | — | 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' | — | Native button type attribute. |
iconPosition | 'left' | 'right' | — | Placement of the icon relative to the text. |
badge | string | — | Badge text shown on the button. |
badgeColor | 'red' | 'green' | 'orange' | 'cobalt' | — | Color of the badge. |
iconOnly | boolean | — | Renders an icon-only button without text. |
fab | boolean | — | Styles the button as a floating action button. |
round | boolean | — | Applies fully rounded corners. |
circle | boolean | — | Renders the button as a circle. |
glass | boolean | — | 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. |
throttle | null | string | number | ThrottleConfig | boolean | — | Rate-limit clicks: at most `limit` executions per `interval` ms, the rest queued and replayed rather than dropped. A bare number is the interval. Emits `mno-throttle` per execution. |
debounce | null | string | number | DebounceConfig | boolean | — | Collapse a burst of clicks into one execution, `wait` ms after the last. A bare number is the wait. Emits `mno-debounce` per execution. |
handler | ButtonHandler | — | The work a click performs. Bind as a property (`:handler.prop="save"`) — it's what gets throttled/debounced, and its promise drives the spinner. |
noAutoLoading | boolean | — | Opt out of the self-driven spinner; `loading` stays fully consumer-controlled. |