LightUI

Docs Github

Documentation

  • Getting Started

Components

  • Avatar
  • Alert
  • Button
  • Badge
  • Card
  • Image
  • Input
  • Typography
  • Toast
  • List

Badge

A badge is a visual indicator for numeric values such as tallies and scores or status such as online, offline and dnd.

Avatar Badge

Avatar Badge is used to show the current status of a user. you can create a badge using class badge for the container.

    you can give position and color to the badge using the following classes

  • badge-dot-size badge-pos-top-left badge-pos-top-right badge-pos-bottom-left badge-pos-bottom-right
  • online offline dnd
A
avatar
M
avatar
A

Number Badge

Number Badge is used to show the no. of items present in the parent component.

you can give position and shape to the badge using the following classes badge-num-size badge-num-pos.

You can use shapes like: square and circle.

7
10
10
7
Avatar Button