Badge

Imports

Badge: The main component to display a list of accordion items.

Usage

Default

import * as React from 'react'
import { Badge } from '@openlite/ui'
 
function App() {
  return (
    <Badge>
      Default
    </Badge>
  )
}

Examples

Primary

import * as React from 'react'
import { Badge } from '@openlite/ui'
 
function App() {
  return (
    <Badge variant="primary">
      Primary
    </Badge>
  )
}

Success

import * as React from 'react'
import { Badge } from '@openlite/ui'
 
function App() {
  return (
    <Badge variant="success" className="[&>p]:m-0">
      Success
    </Badge>
  )
}

Warn

import * as React from 'react'
import { Badge } from '@openlite/ui'
 
function App() {
  return (
    <Badge variant="warn">
      Warn
    </Badge>
  )
}

Error

import * as React from 'react'
import { Badge } from '@openlite/ui'
 
function App() {
  return (
    <Badge variant="error">
      Error
    </Badge>
  )
}

Rounded

import * as React from 'react'
import { Badge } from '@openlite/ui'
 
function App() {
  return (
    <Badge rounded="none">
      Rounded
    </Badge>
  )
}

API

Badge Props

Props	Type	Description
`variant`	`'default' \| 'primary' \| 'success' \| 'warn' \| 'error'`	The variant of the badge.
`rounded`	`'none' \| 'sm' \| 'md' \| 'lg'`	The rounded of the badge.

Badge

On this page