Badge

Le badge permet de porter l'attention de l'utilisateur sur un bouton en y associant une information.

Component checklist

Statut

-

Fonctionnel

Code source

Lien vers le repository (nous demander les droits)

Storybook

Dernière version publiée

Dernière version de modification

Package @ds-autonomie/web-components

2.21.0

Disponible depuis la version

Package @ds-autonomie/web-components

1.0.0

Usage

Ce composant peut être utilisé de manière indépendante, ou être utilisé à l'intérieur des composants dsa-button et dsa-icon-button.


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-badge>Badge</dsa-badge>
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/badge/badge.js';
                                                                                                                                                         import type { DSABadge } from '@ds-autonomie/web-components';
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

Code HTML à implémenter pour utiliser le composant badge

 


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            import { Component } from '@angular/core';
                                                                                                                                                        import type { DSABadge } from '@ds-autonomie/web-components';
                                                                                                                                                        import '@ds-autonomie/web-components/dist/components/badge/badge.js';
                                                                                                                                                        
                                                                                                                                                        @Component({
                                                                                                                                                          selector: 'app-root',
                                                                                                                                                          templateUrl: './app.component.html',
                                                                                                                                                          styleUrls: ['./app.component.css']
                                                                                                                                                        })
                                                                                                                                                        export class AppComponent {}
                                                                                                                                                        
                                                                                                                                                            

app.component.ts


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-badge>Badge</dsa-badge>
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/badge/badge.js';
                                                                                                                                                         import type { DSABadge } from '@ds-autonomie/web-components';
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

app.component.html


API

Attributs et propriétés

Propriété

attribut

Description

Type

Valeur par défaut

pulse

Fait vibrer le badge pour attirer l’attention

boolean

false

size

Taille du badge

medium small

medium

variant

Variante de thème du badge

primary success neutral warning danger

primary

Méthodes

Slots

Nom

Description

(défaut)

Le contenu principal

Événements