Badges RMWC ADDON

Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.

• Module @rmwc/badge
• Import styles:
  • Using CSS Loader
    • import '@rmwc/badge/styles';
  • Or include stylesheets
    • '@rmwc/badge/badge.css'

<>
  
  
  

<>
  
  
  

Usage with other components

The badge component has been designed to play well with the majority of components in RMWC. You can place it inside of any component that accepts children and its default position will be absolute to the top end corner.

Because passing a Badge as a child doesn't always work (for things like overflow: hidden elements), you can use the BadgeAnchor component. This is really just a div with position: relative and some other sensible layout properties set on it, so you can use this or your own CSS to achieve the same result. Additionally, exact positioning is highly dependent on your design and shape of your components. Badges provide an inset property that allows you to adjust the positioning of the Badge as necessary.

<>
  
    <button label="Button">
    
  

  
    </button><button label="Button">
    
  

<>
  
    
    
  

  
    
    
  

Alignment

Badges can be aligned to the start, end, or use inline alignment. They are also RTL aware. They default to align end.

<>
  
    </button><button label="Align Start">
    
  

  
    </button><button label="Align End">
    
  

Transitions

You can transition between the standalone indicator and a badge with content. The badge will consider any label other than null or undefined as valid content.

function Example() {
  const [label, setLabel] = React.useState(undefined);

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      switch (label) {
        case '99+':
          setLabel(undefined);
          break;
        case '':
          setLabel('99+');
          break;
        case undefined:
          setLabel('');
          break;
      }
    }, 1800);

    return () => clearTimeout(timeout);
  }, [label]);

  return (
    
      </button><button label="Button">
      
    
  );
}

Badge

A Badge component for indicating alerts or counts.

Props

BadgeAnchor

An anchor component for badges.