No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from. 


  




  
  


Badge


Documentation and examples for badges, our small count and labeling component.


Badge is deprecated
The current badge component is deprecated and will be replaced with the chip component which will behave similarly to the current badge component.
There will also be a new badge component, but with a different behavior. Check out the new components in figma:
Chip
/
Badge


  
    

      
    Insigno
    
  
      
    

   
<div class="badge">
  <span>Insigno</span>
</div>


NameDescriptionDefaultControl 
Content
Text
The text contained in the badge.
-
General
Size
The size of the badge.
-
Nested Badge
If true, a nested badge is displayed inside the main badge.
-
Interactions
Interaction Type
Defines how the badge can be interacted with.
-



Make sure the @swisspost/design-system-styles package is already present in your project
or follow the installation guidelines.


To import all Design System styles:


@use '@swisspost/design-system-styles/index.scss';


To import only the styles required for this component:


@use '@swisspost/design-system-styles/basics.scss';
@use '@swisspost/design-system-styles/components/badge.scss';




Checkable badges are nothing more than personalized checkboxes.
Therefore, you can handle then like standard checkboxes.


  
    

      
    
    
  
      
    

   



Dismissible badges include a close button, allowing users to easily clear them from the page.
Because the close button does not have a visible text,
it should always include a visually hidden label to ensure accessibility for assistive technology users.


  
    

      
    Malakceptebla Insigno