MazBadge

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

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

primarysecondaryinfosuccesswarningdestructivecontrastaccentbackground

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

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

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

Outlined

primarysecondaryinfosuccesswarningdestructivecontrastaccentbackground

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

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

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

Pastel

primarysecondaryinfosuccesswarningdestructivecontrastaccentbackground

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

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

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

Size

0.8rem 1.2rem 1.6rem 2rem 2.4rem

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

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

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="1.2rem">
    {{ 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' | 'background'
size	Size of the badge	string	No	'0.8em'	-
nowrap	Will not wrap the text	boolean	No	false	-
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