---
title: "MazBtn"
description: "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"
package: "maz-ui"
url: "https://maz-ui.com/components/maz-btn"
---

# 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

- Package: `maz-ui`
- Import: `import MazBtn from 'maz-ui/components/MazBtn'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-btn

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## 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 ``

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

```html
<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="surface">surface</MazBtn>
<MazBtn color="transparent">transparent</MazBtn>
```

## Outlined

Transform the button into an outlined button with the attribute `outlined`

```html
<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="surface" outlined>surface</MazBtn>
<MazBtn color="transparent" outlined>transparent</MazBtn>
```

## Loading

The loading state is available with the attribute `loading`

```vue
<script lang="ts" setup>
const colors = [
  'primary',
  'secondary',
  'info',
  'success',
  'warning',
  'destructive',
  'contrast',
  'accent',
  'transparent',
  'surface',
]
</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`

**Note:**

Better in light mode

```html
<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="surface" pastel>surface</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`

```html
<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`

**Tip: 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.

```html
<MazBtn fab icon="/sun.svg" aria-label="Light mode" size="mini" />
<MazBtn fab icon="/sun.svg" aria-label="Light mode" size="xs" />
<MazBtn fab icon="/sun.svg" aria-label="Light mode" size="sm" />
<MazBtn fab> fab </MazBtn>
<MazBtn fab icon="/sun.svg" aria-label="Light mode" size="lg" />
<MazBtn fab icon="/sun.svg" aria-label="Light mode" size="xl" />
```

## Block

Will take `width: 100%;`

```html
<MazBtn block>block</MazBtn>
```

## Justify

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

By default, the justify is `center`

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

## Disabled

```html
<MazBtn disabled>disabled</MazBtn>
```

## Icons

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

### Use icon path

**Details: 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](./maz-icon.md) 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

**Details: 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](https://maz-ui.com/ecosystem/icons/index.md)

**Details: 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](https://github.com/jpkleemans/vite-svg-loader)

**Details: 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

**Details: 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.

**Details: 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement)

**Note:**

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

```html
<MazBtn href="https://www.google.com" target="_blank"> Is Button Link </MazBtn>
```

## [RouterLink](https://router.vuejs.org/api/#router-link)

**Note:**

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

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

## MazBtn API

`import MazBtn from 'maz-ui/components/MazBtn'`

### Props

- `text` (`string`): The text of the button, if not provided, the slot will be used.
- `size` (`"xs" | "sm" | "md" | "lg" | "xl" | "mini"`): Predifined sizes of the button.
- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "surface"`, default: `"primary"`): The color of the button.
- `text-color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "muted"`): The text color of the button.
- `type` (`"submit" | "reset" | "button"`, default: `"button"`): The type of the button.
- `rounded-size` (`MazRoundedSize`, default: `'md'`): Size of the rounded. Values: `'none'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'full'` (non exhaustive).
- `outlined` (`boolean`, default: `false`): If true, the button have the "border" style.
- `pastel` (`boolean`, default: `false`): If true, the button will have a pastel color.
- `block` (`boolean`, default: `false`): If true, the button will have a full width.
- `loading` (`boolean`, default: `false`): Enable the button loader.
- `disabled` (`boolean`, default: `false`): Disable the button.
- `fab` (`boolean`, default: `false`): If true, the button will have a fab style.
- `icon` (`MazIconLike`): The 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, …).
- `start-icon` (`MazIconLike`): The icon to display on the inline-start edge (left in LTR, right in RTL). Accepts a bare value or a full `MazIconProps` object.
- `end-icon` (`MazIconLike`): The icon to display on the inline-end edge (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object.
- `padding` (`boolean`, default: `true`): Apply the padding of the button, set it to `false` to remove it.
- `justify` (`"center" | "end" | "start" | "space-between" | "space-around" | "space-evenly"`, default: `"center"`): Choose how the elements are aligned in the button.
- `active` (`boolean`, default: `false`): If true, the button will have an active state.
- `overflow-hidden` (`boolean`, default: `true`): If true, the button will have an overflow-hidden style.
- `href` (`string`): HTML attribute handled by the component: renders a link (`<a>`).
- `to` (`RouteLocationRaw`): HTML attribute handled by the component: renders a `RouterLink` (or `NuxtLink`).

### Slots

- `#start-icon`: The icon to display on the inline-start edge (left in LTR, right in RTL)
- `#icon`: The icon to display on the fab button
- `#default`: The content of the button
- `#end-icon`: The icon to display on the inline-end edge (right in LTR, left in RTL)
- `#loader`: The loader to display in the button