MazBadge

MazBadge is a standalone component to show short text in colored container

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

Basic usage

Badge

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

<template>
  <MazBadge>
    Badge
  </MazBadge>
</template>

Options

See all options props here

Colors

primarysecondaryinfosuccesswarningdestructivecontrastaccentsurfacetransparent

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

  const colors = [
    'primary',
    'secondary',
    'info',
    'success',
    'warning',
    'destructive',
    'contrast',
    'accent',
    'surface',
    'transparent',
  ]
</script>

<template>
  <MazBadge v-for="color in color" :key="color" :color="color">
    {{ color }}
  </MazBadge>
</template>

Outlined

primarysecondaryinfosuccesswarningdestructivecontrastaccentsurfacetransparent

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

const colors = [
  'primary',
  'secondary',
  'info',
  'success',
  'warning',
  'destructive',
  'contrast',
  'accent',
  'surface',
  'transparent',
]
</script>

<template>
  <MazBadge v-for="color in color" :key="color" :color="color" outlined>
    {{ color }}
  </MazBadge>
</template>

Pastel

primarysecondaryinfosuccesswarningdestructivecontrastaccentsurfacetransparent

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

  const colors = [
    'primary',
    'secondary',
    'info',
    'success',
    'warning',
    'destructive',
    'contrast',
    'accent',
    'surface',
    'transparent',
  ]
</script>

<template>
  <MazBadge v-for="color in color" :key="color" :color="color" pastel>
    {{ color }}
  </MazBadge>
</template>

Size

The size prop accepts one of the standardized MazSize values ('mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'). The default is 'md'. Padding, line-height and dimensions all scale relative to the chosen font-size, so a single keyword controls the whole badge footprint.

minixssmmdlgxl

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

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

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

Rounded sizes

nonesmmdlgxlfull

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

const roundedSize = ['none', 'sm', 'md', 'lg', 'xl', 'full']
</script>

<template>
  <MazBadge v-for="size in roundedSize" :key="size" :rounded-size="size">
    {{ size }}
  </MazBadge>
</template>

Props

Name	Description	Type	Required	Default	Possible values
color	Color of the badge	MazBadgeColor	No	"primary"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'surface'
size	Size of the badge - drives font-size; padding, line-height and dimensions scale relative to it via em units.	"xs" | "sm" | "md" | "lg" | "xl" | "mini"	No	md	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'mini'
nowrap	Will not wrap the text	boolean	No	true	-
outlined	Will add a border to the badge	boolean	No	false	-
pastel	Will add a pastel style to the badge	boolean	No	false	-
rounded-size	Size radius of the component's border	MazBadgeRoundedSize	No	md	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'

Slots

Name	Description	Bindings
default	Badge content	-