Skip to main content

Badge

Examples

Check out the Usage section for details about how to design a badge properly, and the different configuration options we provide.

Basic Example

You can display a number to a user in a red circle.

5
<Badge value={5} />

Badge Types

Each option for the type property changes the badge's flavor.

neutral
5
notification
5
primary
5
inverse
5
<Badge
type="neutral"
value={5}
/>
<Badge
type="notification"
value={5}
/>
<Badge
type="primary"
value={5}
/>
<Badge
type="inverse"
value={5}
/>

Value larger than max

If the value is larger than maxValue it displays as {maxValue}+.

9+
<JutroWrapper>
<Badge
value={15}
maxValue={9}
/>
</JutroWrapper>
Legal and support information

Published: December 15, 2024 at 9:02 AM

© 2024 Guidewire Software, Inc.