VaneUI

VaneUI

Basic Components

Badge

Highlights important information such as notifications or counts in a non-intrusive way. Badges are typically used in conjunction with other elements like icons or navigation links.

Basic Usage

Default badge styles and variants.

Badge defaultBadge accentBadge primaryBadge secondaryBadge tertiaryBadge successBadge dangerBadge warningBadge infoBadge link
react-icon

BasicUsage.tsx

<Row flexWrap>
  <Badge default>Badge default</Badge>
  <Badge accent>Badge accent</Badge>
  <Badge primary>Badge primary</Badge>
  <Badge secondary>Badge secondary</Badge>
  <Badge tertiary>Badge tertiary</Badge>
  <Badge success>Badge success</Badge>
  <Badge danger>Badge danger</Badge>
  <Badge warning>Badge warning</Badge>
  <Badge info>Badge info</Badge>
  <Badge link>Badge link</Badge>
</Row>

Badge Sizes

Badges come in different sizes such as xs, sm, md, lg, xl.

Badge xsBadge smBadge mdBadge lgBadge xl
react-icon

BadgeSizes.tsx

<Row flexWrap>
  <Badge xs>Badge xs</Badge>
  <Badge sm>Badge sm</Badge>
  <Badge md>Badge md</Badge>
  <Badge lg>Badge lg</Badge>
  <Badge xl>Badge xl</Badge>
</Row>

Badge Props

size

  • xs
  • sm
  • md
  • lg
  • xl

    • hide

  • xsHide
  • smHide
  • mdHide
  • lgHide
  • xlHide

    • items

  • itemsStart
  • itemsEnd
  • itemsCenter
  • itemsBaseline
  • itemsStretch

    • justify

  • justifyStart
  • justifyEnd
  • justifyCenter
  • justifyBetween
  • justifyAround
  • justifyEvenly
  • justifyStretch
  • justifyBaseline

    • position

  • relative
  • absolute
  • fixed
  • sticky
  • static

    • display

  • inline
  • block
  • inlineBlock
  • flex
  • inlineFlex
  • grid
  • inlineGrid
  • contents
  • table
  • tableCell
  • hidden

    • overflow

  • overflowAuto
  • overflowHidden
  • overflowClip
  • overflowVisible
  • overflowScroll
  • overflowXAuto
  • overflowYAuto
  • overflowXHidden
  • overflowYHidden
  • overflowXClip
  • overflowYClip
  • overflowXVisible
  • overflowYVisible
  • overflowXScroll
  • overflowYScroll

    • wrap

  • flexWrap
  • flexNoWrap
  • flexWrapReverse

    • gap

  • gap
  • noGap

    • flexDirection

  • row
  • column
  • rowReverse
  • columnReverse

    • reverse

  • reverse

    • appearance

  • default
  • accent
  • primary
  • secondary
  • tertiary
  • success
  • danger
  • warning
  • info
  • link

    • transparent

  • transparent

    • border

  • border
  • borderT
  • borderB
  • borderL
  • borderR
  • borderX
  • borderY
  • noBorder

    • shadow

  • shadow
  • noShadow

    • ring

  • ring
  • noRing

    • focusVisible

  • focusVisible
  • noFocusVisible

    • shape

  • pill
  • sharp
  • rounded

    • fontWeight

  • thin
  • extralight
  • light
  • normal
  • medium
  • semibold
  • bold
  • extrabold
  • black

    • fontStyle

  • italic
  • notItalic

    • textDecoration

  • underline
  • lineThrough
  • noUnderline
  • overline

    • textTransform

  • uppercase
  • lowercase
  • capitalize
  • normalCase

    • fontFamily

  • sans
  • serif
  • mono

    • textAlign

  • textLeft
  • textCenter
  • textRight
  • textJustify

    • padding

  • padding
  • noPadding

    • variant

  • filled
  • outline

    • On this page

    Badge

    Basic Usage

    Badge Sizes

    Badge Props

    size

    hide

    items

    justify

    position

    display

    overflow

    wrap

    gap

    flexDirection

    reverse

    appearance

    transparent

    border

    shadow

    ring

    focusVisible

    shape

    fontWeight

    fontStyle

    textDecoration

    textTransform

    fontFamily

    textAlign

    padding

    variant