Badge · goat/ui

Home

Components

Badge

Overview

Playground

API

The badge component is used to display a small amount of information to the user.

Usage


  <goat-badge content="1">
    <goat-icon name="notification"></goat-icon>
  </goat-badge>

Examples


  <div class="component-container">
    <goat-badge content="1" color="warning">
      <goat-icon name="notification"></goat-icon>
    </goat-badge>

    <goat-badge content="30" color="error">
      <goat-icon name="notification"></goat-icon>
    </goat-badge>

    <goat-badge content="" color="error">
      <goat-icon name="notification"></goat-icon>
    </goat-badge>
  </div>

  <div class="component-container">
    <goat-badge content="2" color="success">
      <goat-button icon="home"></goat-button>
    </goat-badge>

    <goat-badge content="" color="error">
      <goat-button icon="home"></goat-button>
    </goat-badge>
  </div>

Usage

Examples

Work in progress

Properties

Events

Methods

CSS Custom Properties