Maz-UI

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 ​

vue
<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

Colors ​

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
surface
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

Accessible name

A button that only shows an icon has no text for screen readers: give it an aria-label describing the action (aria-label="Light mode"), or a title on the icon (:icon="{ icon: MazSun, title: 'Light mode' }"), which names the icon and so the button.

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 ​

Start Icon and End Icon

Fab

Icon component

Use icon path ​

View code

When you use the properties end-icon, start-icon or icon with the icon path, the component uses <MazIcon icon="..." /> component.

Check out how MazIcon works, see all available icons and download them to put them in your public folder.

html
<MazBtn start-icon="/check.svg" size="sm"> start-icon </MazBtn>
<MazBtn end-icon="/home.svg"> end-icon </MazBtn>
<MazBtn icon="/command-line.svg" fab size="lg" />

Use your own SVG icons ​

View code
html
<MazBtn size="sm">
  <template #start-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>
  start-icon
</MazBtn>
<MazBtn>
  <template #end-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>
  end-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 } from '@maz-ui/icons/raw/MazCheck'
import { MazHome } from '@maz-ui/icons/raw/MazHome'
import { MazCommandLine } from '@maz-ui/icons/raw/MazCommandLine'
</script>

<template>
  <MazBtn :start-icon="MazCheck" size="sm">
    start-icon
  </MazBtn>
  <MazBtn :end-icon="MazHome">
    end-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 :start-icon="MazCheck" size="sm">
    start-icon
  </MazBtn>
  <MazBtn :end-icon="MazHome">
    end-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 :start-icon="MazSpinner" size="sm" color="info">
    start-icon
  </MazBtn>
</template>

Pass a full MazIconProps object ​

startIcon, endIcon and icon accept either a bare value (Vue component, URL, raw SVG string) or a full MazIconProps object. The latter is useful when you want to override the auto-derived size, set a <title> for screen readers, flip a directional icon for RTL, or attach extra SVG attributes.

View code
vue
<script lang="ts" setup>
import MazBtn from 'maz-ui/components/MazBtn'
import { MazStar } from '@maz-ui/icons/raw/MazStar'
</script>

<template>
  <!-- The button picks an icon size from its own size — `sm` defaults to a small icon. -->
  <MazBtn size="sm" :start-icon="MazStar">favorite</MazBtn>

  <!-- Pass an object to override per-icon. -->
  <MazBtn
    size="sm"
    :start-icon="{
      icon: MazStar,
      size: 'xl',
      title: 'Favorite',
      flipIconForRtl: true,
    }"
  >
    favorite
  </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 usedstringNo--
sizePredifined sizes of the button"xs" | "sm" | "md" | "lg" | "xl" | "mini"No-'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'mini'
colorThe color of the button"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "surface"No"primary"'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent' | 'surface'
text-colorThe text color of the button"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "muted"No-'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent' | 'muted'
typeThe type of the button"submit" | "reset" | "button"No"button"'submit' | 'reset' | 'button'
rounded-sizeSize of the roundedMazRoundedSizeNo'md''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 icon to display in the fab variant. Accepts a bare value (Vue component, raw SVG string, URL or data: URI) for the common case, or a full MazIconProps object for fine-grained control (size, title, svgAttributes, fallback, flipIconForRtl, …).MazIconLikeNo--
start-iconThe icon to display on the inline-start edge (left in LTR, right in RTL). Accepts a bare value or a full MazIconProps object.MazIconLikeNo--
end-iconThe icon to display on the inline-end edge (right in LTR, left in RTL). Accepts a bare value or a full MazIconProps object.MazIconLikeNo--
paddingApply the padding of the button, set it to false to remove itbooleanNotrue-
justifyChoose how the elements are aligned in the button"center" | "end" | "start" | "space-between" | "space-around" | "space-evenly"No"center"'center' | 'end' | 'start' | 'space-between' | 'space-around' | 'space-evenly'
activeIf true, the button will have an active statebooleanNofalse-
overflow-hiddenIf true, the button will have an overflow-hidden stylebooleanNotrue-
hrefHTML attribute handled by the component: renders a link (<a>)stringNo--
toHTML attribute handled by the component: renders a RouterLink (or NuxtLink)RouteLocationRawNo--

Slots ​

NameDescriptionBindings
start-iconThe icon to display on the inline-start edge (left in LTR, right in RTL)-
iconThe icon to display on the fab button-
defaultThe content of the button-
end-iconThe icon to display on the inline-end edge (right in LTR, left in RTL)-
loaderThe loader to display in the button-