MazBadge

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

INFO

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

Basic usage

Badge

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

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

Options

See all options props here

Colors

primarysecondaryinfosuccesswarningdangerwhiteblackgraytheme

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

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

  const colors = [
    'primary',
    'secondary',
    'info',
    'success',
    'warning',
    'danger',
    'white',
    'black',
    'gray',
  ]
</script>

Outline

primarysecondaryinfosuccesswarningdangerwhiteblackgraytheme

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

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

  const colors = [
    'primary',
    'secondary',
    'info',
    'success',
    'warning',
    'danger',
    'white',
    'black',
    'gray',
  ]
</script>

Pastel

primarysecondaryinfosuccesswarningdangerwhiteblackgraytheme

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

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

  const colors = [
    'primary',
    'secondary',
    'info',
    'success',
    'warning',
    'danger',
    'white',
    'black',
    'gray',
  ]
</script>

Size

0.8rem 1.2rem 1.6rem 2rem 2.4rem

<template>
  <MazBadge size="0.8rem">
    0.8rem
  </MazBadge>
  <MazBadge size="1.2rem">
    1.2rem
  </MazBadge>
  <MazBadge size="1.6rem">
    1.6rem
  </MazBadge>
  <MazBadge size="2rem">
    2rem
  </MazBadge>
  <MazBadge size="2.4rem">
    2.4rem
  </MazBadge>
</template>

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

Rounded sizes

nonesmmdlgxlfull

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

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

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

Props & Slots

Props

Prop name	Description	Type	Values	Default
color		BadgeColor	-	'primary'
size		string	-	'0.8em'
nowrap		boolean	-	false
outline		boolean	-	false
pastel		boolean	-	false
roundedSize	Size radius of the component's border @values 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'	BadgeRoundedSize	-	'md'

Slots

Name	Description	Bindings
default