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

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

Basic usage

<script setup lang="ts">
import MazBtn from 'maz-ui/components/MazBtn'
</script>

<template>
  <MazBtn>Button</MazBtn>
</template>

Sizes

Use the attribute size with value mini, xs, sm, md, lg, xl

<script setup lang="ts">
const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
</script>

<template>
  <MazBtn v-for="size in sizes" :key="size" :size="size">
    {{ size }}
  </MazBtn>
</template>

Colors

<MazBtn>primary</MazBtn>
<MazBtn color="secondary">secondary</MazBtn>
<MazBtn color="info">info</MazBtn>
<MazBtn color="success">success</MazBtn>
<MazBtn color="warning">warning</MazBtn>
<MazBtn color="destructive">destructive</MazBtn>
<MazBtn color="contrast">contrast</MazBtn>
<MazBtn color="accent">accent</MazBtn>
<MazBtn color="background">background</MazBtn>
<MazBtn color="transparent">transparent</MazBtn>

Outlined

Transform the button into an outlined button with the attribute outlined

<MazBtn outlined>primary</MazBtn>
<MazBtn color="secondary" outlined>secondary</MazBtn>
<MazBtn color="info" outlined>info</MazBtn>
<MazBtn color="success" outlined>success</MazBtn>
<MazBtn color="warning" outlined>warning</MazBtn>
<MazBtn color="destructive" outlined>destructive</MazBtn>
<MazBtn color="contrast" outlined>contrast</MazBtn>
<MazBtn color="accent" outlined>accent</MazBtn>
<MazBtn color="background" outlined>background</MazBtn>
<MazBtn color="transparent" outlined>transparent</MazBtn>

Loading

The loading state is available with the attribute loading

primary

secondary

accent

info

success

warning

destructive

contrast

background

transparent

<script lang="ts" setup>
const colors = [
  'primary',
  'secondary',
  'info',
  'success',
  'warning',
  'destructive',
  'contrast',
  'accent',
  'transparent',
  'background',
]
</script>

<template>
  <MazBtn
    v-for="color of colors"
    :key="color"
    loading
    :color="color"
  >
    {{ color }}
  </MazBtn>
</template>

Pastel

The pastel state is available with the attribute pastel

INFO

Better in light mode

<MazBtn pastel>primary</MazBtn>
<MazBtn color="secondary" pastel>secondary</MazBtn>
<MazBtn color="info" pastel>info</MazBtn>
<MazBtn color="success" pastel>success</MazBtn>
<MazBtn color="warning" pastel>warning</MazBtn>
<MazBtn color="destructive" pastel>destructive</MazBtn>
<MazBtn color="contrast" pastel>contrast</MazBtn>
<MazBtn color="accent" pastel>accent</MazBtn>
<MazBtn color="background" pastel>background</MazBtn>
<MazBtn color="transparent" pastel>transparent</MazBtn>

Rounded Size

Choose the size of the rounded with the attribute rounded-size and value none, sm, md, lg, xl, full

<MazBtn rounded-size="none">none</MazBtn>
<MazBtn rounded-size="sm">sm</MazBtn>
<MazBtn rounded-size="md">md</MazBtn>
<MazBtn rounded-size="lg">lg</MazBtn>
<MazBtn rounded-size="xl">xl</MazBtn>
<MazBtn rounded-size="full">full</MazBtn>

Fab

The button can be a fab button with the attribute fab

<MazBtn fab icon="sun" size="mini" />
<MazBtn fab icon="sun" size="xs" />
<MazBtn fab icon="sun" size="sm" />
<MazBtn fab> fab </MazBtn>
<MazBtn fab icon="sun" size="lg" />
<MazBtn fab icon="sun" size="xl" />

Block

Will take width: 100%;

<MazBtn block>block</MazBtn>

Justify

This property is used to align the content of the button.

By default, the justify is center

<MazBtn block justify="center" icon="users" right-icon="sun" size="md">center</MazBtn>
<MazBtn block justify="start" icon="users" right-icon="sun" size="md">start</MazBtn>
<MazBtn block justify="end" icon="users" right-icon="sun" size="md">end</MazBtn>
<MazBtn block justify="space-between" icon="users" right-icon="sun" size="md">between</MazBtn>
<MazBtn block justify="space-around" icon="users" right-icon="sun" size="md">around</MazBtn>
<MazBtn block justify="space-evenly" icon="users" right-icon="sun" size="md">evenly</MazBtn>

Disabled

<MazBtn disabled>disabled</MazBtn>

Icons

Left Icon and Right Icon

Fab

Icon component

<MazBtn :left-icon="MazCheck" size="mini">
  left-icon
</MazBtn>
<MazBtn :left-icon="MazCheck" size="xs">
  left-icon
</MazBtn>
<MazBtn :left-icon="MazCheck" size="sm">
  left-icon
</MazBtn>
<MazBtn :left-icon="MazCheck" size="md">
  left-icon
</MazBtn>
<MazBtn :left-icon="MazCheck" size="lg">
  left-icon
</MazBtn>
<MazBtn :left-icon="MazCheck" size="xl">
  left-icon
</MazBtn>
<MazBtn fab :icon="MazCommandLine" size="lg" />
<MazBtn :left-icon="MazSpinner" size="sm" color="warning">
  icon component
</MazBtn>

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 } from '@maz-ui/icons/MazCheck'
import { MazHome } from '@maz-ui/icons/MazHome'
import { MazCommandLine } from '@maz-ui/icons/MazCommandLine'
</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="..." />

Is Button Link

<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="..." />

Is Router Link

<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	Predifined sizes 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" | "base"	No	base	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'base'
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	-
active	If true, the button will have an active state	boolean	No	false	-

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
right-icon	The icon to display on the right of the button
loader	The loader to display in the button