VaneUI

VaneUI

Basic Components

Label

Displays text with various styling options for categorization, status indicators, or highlighting important information. Labels can be styled with different colors, sizes, and variants.

Basic Usage

Default label styles and text.

react-icon

BasicUsage.tsx

<Row flexWrap>
<Label>Default</Label>
<Label primary>Primary Action</Label>
<Label secondary>Secondary Info</Label>
<Label success>Success</Label>
<Label warning>Warning</Label>
<Label danger>Error</Label>
</Row>

Sizes

Labels come in different sizes - xs, sm, md, lg, xl.

react-icon

Sizes.tsx

<Row flexWrap>
<Label primary xs>Label xs</Label>
<Label primary sm>Label sm</Label>
<Label md primary>Label md</Label>
<Label lg primary>Label lg</Label>
<Label primary xl>Label xl</Label>
</Row>

Appearances

Different label color variants for various states.

react-icon

Appearances.tsx

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

Font Weights

Labels support different font weights.

react-icon

FontWeights.tsx

<Row flexWrap>
<Label lg thin>thin weight</Label>
<Label extralight lg>extralight weight</Label>
<Label lg light>light weight</Label>
<Label lg normal>normal weight</Label>
<Label lg medium>medium weight</Label>
<Label lg semibold>semibold weight</Label>
<Label bold lg>bold weight</Label>
<Label extrabold lg>extrabold weight</Label>
<Label black lg>black weight</Label>
</Row>

Text Decorations

Labels with different text decorations.

react-icon

TextDecorations.tsx

<Row flexWrap>
<Label lg underline>underline text</Label>
<Label lg lineThrough>lineThrough text</Label>
<Label lg noUnderline>noUnderline text</Label>
<Label lg overline>overline text</Label>
</Row>

Label Props

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

  • filled
  • outline