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

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

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

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

Sizes

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

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

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

Colors

Use the attribute color with a value in this list, the component will use this color

<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="danger">danger</MazBtn>
<MazBtn color="white">white</MazBtn>
<MazBtn color="black">black</MazBtn>
<MazBtn color="transparent">transparent</MazBtn>

Outline

Transform the button into an outline button with the attribute outline

<MazBtn outline>primary</MazBtn>
<MazBtn color="secondary" outline>secondary</MazBtn>
<MazBtn color="info" outline>info</MazBtn>
<MazBtn color="success" outline>success</MazBtn>
<MazBtn color="warning" outline>warning</MazBtn>
<MazBtn color="danger" outline>danger</MazBtn>
<MazBtn color="white" outline>white</MazBtn>
<MazBtn color="black" outline>black</MazBtn>
<MazBtn color="transparent" outline>transparent</MazBtn>

Loading

The loading state is available with the attribute loading

primary

secondary

info

success

warning

danger

white

black

transparent

theme

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

<script lang="ts" setup>
  const colors = [
    'primary',
    'secondary',
    'info',
    'success',
    'warning',
    'danger',
    'white',
    'black',
    'transparent',
    'theme',
  ]
</script>

Pastel

The pastel state is available with the attribute pastel

INFO

It's 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="danger" pastel>danger</MazBtn>
<MazBtn color="white" pastel>white</MazBtn>
<MazBtn color="black" pastel>black</MazBtn>
<MazBtn color="transparent" pastel>transparent</MazBtn>

Rounded

Make the button rounded with the attribute rounded

<MazBtn rounded>rounded</MazBtn>
<!-- or -->
<MazBtn rounded-size="full">rounded</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="between" icon="users" right-icon="sun" size="md">between</MazBtn>
<MazBtn block justify="end" icon="users" right-icon="sun" size="md">end</MazBtn>
<MazBtn block justify="start" icon="users" right-icon="sun" size="md">start</MazBtn>
<MazBtn block justify="around" icon="users" right-icon="sun" size="md">around</MazBtn>
<MazBtn block justify="evenly" icon="users" right-icon="sun" size="md">evenly</MazBtn>

Disabled

<MazBtn disabled>disabled</MazBtn>

Icons

<MazBtn left-icon="check" size="sm">
  left-icon
</MazBtn>
<MazBtn right-icon="home">
  right-icon
</MazBtn>
<MazBtn icon="command-line" fab size="lg" />

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 vite-svg-loader

View code

<template>
  <MazBtn :left-icon="CheckIcon" size="sm">
    left-icon
  </MazBtn>
  <MazBtn :right-icon="HomeIcon">
    right-icon
  </MazBtn>
  <MazBtn fab :icon="CommandLineIcon" size="lg" />
</template>

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

  import CheckIcon from 'maz-ui/icons/check.svg'
  import HomeIcon from 'maz-ui/icons/home.svg'
  import CommandLineIcon from 'maz-ui/icons/command-line.svg'
</script>

Use your own components

View code

<template>
  <MazBtn :left-icon="MazSpinner" size="sm" color="info">
    left-icon
  </MazBtn>
</template>

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

Link

TIP

With the attribute variant="link", the button looks like a link but it's a button, so you can use the event @click

Additional props available include: no-underline & no-leading

If you want to use a real link, you can use the MazLink component

<MazBtn variant="link" @click="$emit('click')">Is Link</MazBtn>
<MazBtn variant="link" @click="$emit('click')" no-underline>Is Link</MazBtn>
<MazBtn variant="link" @click="$emit('click')" no-leading no-underline>Is Link</MazBtn>

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 & Slots

Props

Prop name	Description	Type	Values	Default
variant	The variant of the button - Change UI of component (link or button style) @values 'button' | 'link' @deprecated Use the component <MazLink /> instead	union	-	'button'
size	The size of the button @values 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'	Size	-	'md'
color	The color of the button @values 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'black' | 'transparent' | 'theme'	Color	-	'primary'
type	The type of the button @values 'submit' | 'reset' | 'button'	union	-	'button'
rounded	If true, the button will have a full border radius @default false	boolean	-
roundedSize	Size of the rounded @values 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' @default 'lg'	union	-	'lg'
noRounded	If true, the button will have no border radius @default false	boolean	-
outline	If true, the button have the "border" style @default false	boolean	-
pastel	If true, the button will have a pastel color @default false	boolean	-
block	If true, the button will have a full width @default false	boolean	-
noUnderline	If true, the button will have no underline on hover (useful with variant="link") @default false	boolean	-
loading	Enable the button loader @default false	boolean	-
disabled	Disable the button @default false	boolean	-
fab	If true, the button will have a fab style @default false	boolean	-
icon	The name of the icon to display or component, only with fab @type {string | FunctionalComponent&lt;SVGAttributes&gt; | ComponentPublicInstance | Component}	union	-	undefined
leftIcon	The name of the icon or component to display on the left of the button @type {string | FunctionalComponent&lt;SVGAttributes&gt; | ComponentPublicInstance | Component}	union	-	undefined
rightIcon	The name of the icon or component to display on the right of the button @type {string | FunctionalComponent&lt;SVGAttributes&gt; | ComponentPublicInstance | Component}	union	-	undefined
noPadding	If true, the button will have no padding @default false	boolean	-
noElevation	If true, the button will have no box-shadow @default false	boolean	-
justify	Choose how the elements are aligned in the button	union	-	'center'

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