package.README.md Maven / Gradle / Ivy

Show more of this group Show more artifacts with this name
Show all versions of qui-badge Show documentation

A Badge UI component

The newest version!

# qui-badge

The badge UI component is based on the Vaadin themed badge (https://vaadin.com/docs/latest/components/badge), but it's a webcomponent

## Installation

```bash
npm i @qomponent/qui-badge
```

## Usage

```javascript
import '@qomponent/qui-badge';
```

```html

    Tiny
    
        Default
        Success
        Warning
        Error
        Contrast
        Custom colors
    

    Small
    
        Default
        Success
        Warning
        Error
        Contrast
        Custom colors
    
    
    Primary
    
        Default primary
        Success primary
        Warning primary
        Error primary
        Contrast primary
        Custom colors
    

    Pill
    
        Default pill
        Success pill
        Warning pill
        Error pill
        Contrast pill
        Custom colors
           
    
    With Icon
    
        
            Default icon
        
        
            Success icon
        
        
            Warning icon
        
        
            Error icon
        
        
            Contrast icon
        
        
            Custom colors
        
    

    Icon only
    
        
        
        
        
        
        
    

    Clickable
    
        Default
        Success
        Warning
        Error
        Contrast
        Custom colors
    
    

```

## Example

To run the example:

```bash
npm install
npm start
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

## License

[Apache 2](http://www.apache.org/licenses/LICENSE-2.0)