MazBtn
MazBtn is a standalone component that replaces the standard html button with a beautiful design system. Many options like colors, sizes, disabled state, loading state, icons are included. Support of router-link and nuxt-link
Basic usage
Sizes
Use the attribute size
with value mini, xs, sm, md, lg, xl
Colors
Use the attribute color
with a value in this list, the component will use this color
Outlined
Transform the button into an outlined button with the attribute outlined
Loading
The loading state is available with the attribute loading
Pastel
The pastel state is available with the attribute pastel
INFO
Better in light mode
Rounded Size
Choose the size of the rounded with the attribute rounded-size
and value none
, sm
, md
, lg
, xl
, full
Fab
The button can be a fab button with the attribute fab
Block
Will take width: 100%;
Justify
This property is used to align the content of the button.
By default, the justify is center
Disabled
Icons
Use icon name
View code
When you use the properties right-icon
, left-icon
or icon
with the icon name (string), the component uses <MazIcon name="..." />
component.
Check out how MazIcon works, see all available icons and download them to put them in your public folder.
<MazBtn left-icon="check" size="sm"> left-icon </MazBtn>
<MazBtn right-icon="home"> right-icon </MazBtn>
<MazBtn icon="command-line" fab size="lg" />
Use your own SVG icons
View code
<MazBtn size="sm">
<template #left-icon>
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.5 12.75L10.5 18.75L19.5 5.25"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</template>
left-icon
</MazBtn>
<MazBtn>
<template #right-icon>
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.25 12L11.2045 3.04549C11.6438 2.60615 12.3562 2.60615 12.7955 3.04549L21.75 12M4.5 9.75V19.875C4.5 20.4963 5.00368 21 5.625 21H9.75V16.125C9.75 15.5037 10.2537 15 10.875 15H13.125C13.7463 15 14.25 15.5037 14.25 16.125V21H18.375C18.9963 21 19.5 20.4963 19.5 19.875V9.75M8.25 21H16.5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</template>
right-icon
</MazBtn>
<MazBtn fab size="lg">
<template #icon>
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.75 7.5L9.75 9.75L6.75 12M11.25 12H14.25M5.25 20.25H18.75C19.9926 20.25 21 19.2426 21 18V6C21 4.75736 19.9926 3.75 18.75 3.75H5.25C4.00736 3.75 3 4.75736 3 6V18C3 19.2426 4.00736 20.25 5.25 20.25Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</template>
</MazBtn>
Use @maz-ui/icons
View code
<script lang="ts" setup>
import MazBtn from 'maz-ui/components/MazBtn'
import { MazCheck, MazHome, MazCommandLine } from '@maz-ui/icons'
</script>
<template>
<MazBtn :left-icon="MazCheck" size="sm">
left-icon
</MazBtn>
<MazBtn :right-icon="MazHome">
right-icon
</MazBtn>
<MazBtn fab :icon="MazCommandLine" size="lg" />
</template>
Use vite-svg-loader
View code
<script lang="ts" setup>
import MazBtn from 'maz-ui/components/MazBtn'
import MazCheck from '@maz-ui/icons/svg/check.svg?component'
import MazHome from '@maz-ui/icons/svg/home.svg?component'
import MazCommandLine from '@maz-ui/icons/svg/command-line.svg?component'
</script>
<template>
<MazBtn :left-icon="MazCheck" size="sm">
left-icon
</MazBtn>
<MazBtn :right-icon="MazHome">
right-icon
</MazBtn>
<MazBtn fab :icon="MazCommandLine" size="lg" />
</template>
Use your own components
View code
<script lang="ts" setup>
import { MazBtn, MazSpinner } from 'maz-ui/components'
</script>
<template>
<MazBtn :left-icon="MazSpinner" size="sm" color="info">
left-icon
</MazBtn>
</template>
HTMLLinkElement
INFO
When href
attribute is provided, the component automatically becomes a <a href="..." />
<MazBtn href="https://www.google.com" target="_blank"> Is Button Link </MazBtn>
RouterLink
INFO
When to
attribute is provided, the component automatically becomes a <RouterLink to="..." />
<MazBtn :to="{ path: '/made-with-maz-ui.html' }"> Is RouterLink </MazBtn>
Props
Name | Description | Type | Required | Default | Possible values |
---|---|---|---|---|---|
text | The text of the button, if not provided, the slot will be used | string | No | undefined | - |
size | The size of the button | MazSize | No | undefined | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini' |
color | The color of the button | MazColor | "background" | No | undefined | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'destructive' | 'transparent' | 'contrast' | 'accent' | 'background' |
type | The type of the button | "submit" | "reset" | "button" | No | undefined | 'submit' | 'reset' | 'button' |
rounded-size | Size of the rounded | "none" | "sm" | "md" | "lg" | "xl" | "full" | No | lg | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' |
outlined | If true, the button have the "border" style | boolean | No | false | - |
pastel | If true, the button will have a pastel color | boolean | No | false | - |
block | If true, the button will have a full width | boolean | No | false | - |
loading | Enable the button loader | boolean | No | false | - |
disabled | Disable the button | boolean | No | false | - |
fab | If true, the button will have a fab style | boolean | No | false | - |
icon | The name of the icon to display or component, only with fab @type {string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component} | string | IconComponent | No | undefined | - |
left-icon | The name of the icon or component to display on the left of the button @type {string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component} | string | IconComponent | No | undefined | - |
right-icon | The name of the icon or component to display on the right of the button @type {string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component} | string | IconComponent | No | undefined | - |
padding | If true, the button will have no padding | boolean | No | true | - |
justify | Choose how the elements are aligned in the button | "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | No | undefined | - |
Slots
Name | Description | Bindings |
---|---|---|
left-icon | The icon to display on the left of the button | |
icon | The icon to display on the fab button | |
default | The content of the button | |
left-icon | The icon to display on the left of the button | |
loader | The loader to display in the button |