Skip to content

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

primary
secondary
accent
info
success
warning
destructive
contrast
background
transparent

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.

html
<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
html
<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
vue
<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
vue
<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
vue
<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
html
<MazBtn href="https://www.google.com" target="_blank"> Is Button Link </MazBtn>

INFO

When to attribute is provided, the component automatically becomes a <RouterLink to="..." />

Is Router Link
html
<MazBtn :to="{ path: '/made-with-maz-ui.html' }"> Is RouterLink </MazBtn>

Props

NameDescriptionTypeRequiredDefaultPossible values
textThe text of the button, if not provided, the slot will be usedstringNoundefined-
sizeThe size of the buttonMazSizeNoundefined'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'
colorThe color of the buttonMazColor | "background"Noundefined'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'destructive' | 'transparent' | 'contrast' | 'accent' | 'background'
typeThe type of the button"submit" | "reset" | "button"Noundefined'submit' | 'reset' | 'button'
rounded-sizeSize of the rounded"none" | "sm" | "md" | "lg" | "xl" | "full"Nolg'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
outlinedIf true, the button have the "border" stylebooleanNofalse-
pastelIf true, the button will have a pastel colorbooleanNofalse-
blockIf true, the button will have a full widthbooleanNofalse-
loadingEnable the button loaderbooleanNofalse-
disabledDisable the buttonbooleanNofalse-
fabIf true, the button will have a fab stylebooleanNofalse-
iconThe name of the icon to display or component, only with fab @type {string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}string | IconComponentNoundefined-
left-iconThe name of the icon or component to display on the left of the button @type {string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}string | IconComponentNoundefined-
right-iconThe name of the icon or component to display on the right of the button @type {string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}string | IconComponentNoundefined-
paddingIf true, the button will have no paddingbooleanNotrue-
justifyChoose how the elements are aligned in the button"start" | "end" | "center" | "space-between" | "space-around" | "space-evenly"Noundefined-

Slots

NameDescriptionBindings
left-iconThe icon to display on the left of the button
iconThe icon to display on the fab button
defaultThe content of the button
left-iconThe icon to display on the left of the button
loaderThe loader to display in the button