Badge

Badge is a label that indicates version number, status or importance. It can be used to highlight a piece of information or draw attention to a particular item in a color-assisted manner.

v1.2ReleasedDeprecatedUpdatesNot found!Done

Props

Props	Type	Default	Description
`type`	`String`	`primary`	Type of the badge. Possible values: `success`, `warning`, `danger`, `info`, `primary`, `secondary`, `neutral`

Slots

Slot	Description
`default`	Content of the badge

Design Tokens

tokens.config.ts

import { defineTheme } from 'pinceau'

export default defineTheme({
  elements: {
    badge: {
      paddingX: '{space.2}', 
      paddingY: '{space.1}', 
      fontSize: '{text.base.fontSize}', 
      fontWeight: '{fontWeight.normal}', 
      lineHeight: '{typography.lead.none}', 
      letterSpacing: '{letterSpacing.tight}', 
      borderRadius: '{elements.radii.base}', 
      borderWidth: '1px', 
      borderStyle: 'solid', 
      boxShadow: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1)',
    },
  }
})

Edit this page on GitHub

ElementsAnnounceAnnounce is a component that can be used to display a message to the user. It renders as a pill-shaped link element. It is useful for displaying marketing message to the user that is not critical, but that you want to make sure they see (e.g. a new feature announcement).ElementsButton LinkA component to render a link as a button. This component is a wrapper around the NuxtLink component.