Badges
Small and adaptive Badge for adding context to just about any content.
Below have options that you can use with Badges :
| badges options | Class | Description |
|---|---|---|
| Basic badges | .badge-* |
Use any template color from COLOR PALETTE that you like to add for badge. |
Using above options, create some more badges as below:
- badges with icons
- Only icons badges
- Bordered badges with icons
- Bordered icons badges
- Striped badges with icons
- Striped icons badges
- badges With Links, Dropdown, etc...
Referrals :
| Type | URL |
|---|---|
| Bootstrap Page | https://getbootstrap.com/docs/4.0/components/badge |
| Template Page | https://demos.pixinvent.com/apex-angular-admin-template/demo-1/components/badges |
Pill badges
Use the .badge-pill modifier class with .badge class to make
pill badges.
Below have options that you can use with Pill badges :
| Pill badges options | Class | Description |
|---|---|---|
| Basic Pill badges | .badge-pill.badge-* |
Use any template color from COLOR PALETTE that you like to add for pill badge. |
| Pill badges as Notification | .notification |
To set pill badge to higher than other text. So that it can work with notifications also. |
Using above options, create some more badges as below:
- Pill badges with icons
- Only icons pill badges
- Bordered pill badges with icons
- Bordered icons pill badges
- Square pill badges with icons
- Square icons pill badges
- Pill badges With Links, Dropdown, etc...
Referrals :
| Type | URL |
|---|---|
| Bootstrap Page | https://getbootstrap.com/docs/4.0/components/badge/#pill-badges |
| Template Page | https://demos.pixinvent.com/apex-angular-admin-template/demo-1/components/badges |