hansui

Appearance

Badge ​

A small indicator or label showing counts, statuses, or categories in a compact format.

default

Features ​

  • Full keyboard navigation
  • Can expand one or multiple items

Anatomy ​

  • Root: The root container for the badge

Usage ​

To create a badge, you can use the New function as shown in the example at the top of this page, or alternatively, you can follow the Builder or Functional patterns. Be sure to follow the anatomy defined above.

Builder pattern

The Builder pattern creates an instance using method chaining. The With methods, such as WithColor or WithBorderStyle, are chainable configuration functions that allow you to customize various properties of the component:

templ
@badge.Info("builder").Render()
Functional pattern

The Functional pattern applies configurations through individual function calls before rendering the button. Like in the Builder pattern, With methods customize the component by setting specific properties:

templ
@badge.Render("This is a tip", badge.WithType("info"))

API Reference ​

badge.Props ​

Below is a list of each struct field, along with its type, default value, and allowed values where applicable.

Type ​

Defines the color of the badge.

  • type: string
  • default: hansui.Shape
  • values: hansui.Shape

Size ​

Specifies the size of the badge.

  • type: string
  • default: md
  • values: sm, md, lg

Shape ​

Defines the shape of the badge.

  • type: string
  • default: rounded
  • values: box, rounded, circle

Variant ​

Specifies the style variant of the badge.

  • type: string
  • default: grouped
  • values: grouped, isolated, lifted, stacked, cyberpunk, brutalist, retro

Icon ​

Optional icon configuration for the badge.

  • type: *hansui.Icon

Bordered ​

If true, a border will be applied to the badge.

  • type: bool
  • default: false