Basic Components
Displays text with various styling options for categorization, status indicators, or highlighting important information. Labels can be styled with different colors, sizes, and variants.
Default label styles and text.
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>
Labels come in different sizes - xs
, sm
, md
, lg
, xl
.
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>
Different label color variants for various states.
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>
Labels support different font weights.
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>
Labels with different text decorations.
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>