hansui

Appearance

Alert ​

Displays important notifications or warnings to catch user attention effectively.

Features ​

  • Full keyboard navigation
  • Can expand one or multiple items

Anatomy ​

  • Root: The root container for the alert

Usage ​

To create a button, you can use the New function, or alternatively, you can follow the Builder or Functional patterns.Be sure to follow the anatomy as shown in the example above.

New function

templ
@alert.New(title string, props ...*alert.Props) {
    /* content here as pure HTML */
}
  • title - A string representing the title for the alert.
  • props - A pointer to the alert.Props struct that defines the configuration options for the alert (see here).
templ
import "github.com/indaco/hansui/components/alert"

@alert.New("Alert", &alert.Props{
    Dismiss: true,
}) {
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam placeat odit cumque amet asperiores quaerat magnam, fugit odio praesentium officiis illo omnis maiores, nobis modi, aliquam itaque vitae cum ducimus.</p>
}
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
@alert.Builder("Alert").WithState("info").WithDismiss(true).Render() {
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Ipsam placeat odit cumque amet asperiores quaerat magnam,
        fugit odio praesentium officiis illo omnis maiores, nobis
        modi, aliquam itaque vitae cum ducimus.
    </p>
}
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
@alert.Render("Alert", alert.WithState("warning"), alert.WithDismiss(true)) {
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Ipsam placeat odit cumque amet asperiores quaerat magnam,
        fugit odio praesentium officiis illo omnis maiores, nobis
        modi, aliquam itaque vitae cum ducimus.
    </p>
}

API Reference ​

alert.Props ​

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

Variant ​

Defines the style variant of the alert component.

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

State ​

Specifies the visual state of the alert, such as success, error, or warning.

  • type: string
  • default: default
  • values: default, success, error, warning, info

Icon ​

Optional icon configuration for the alert. Can be used to add a visual indicator such as an icon representing the alert state.

  • type: *hansui.Icon

Dismiss ​

If true, the alert can be dismissed by the user.

  • type: bool
  • default: false

Actions ​

Defines a set of actions associated with the alert, such as buttons or links.

  • type: alert.Actions

alert.Actions ​

Placement ​

Specifies the placement of the actions relative to the alert content (e.g., left, right, top, bottom).

  • type: hansui.Position

Shape ​

Defines the shape of the actions' buttons or links.

  • type: hansui.Shape

Items ​

An array of actions that are available in the alert.

  • type: []alert.Action

alert.Action ​

Label ​

The text label for the action button or link.

  • type: string

Href ​

The URL for the action if rendered as a link.

  • type: string

Attrs ​

Additional HTML attributes for the action element. Can be used to set custom attributes such as data attributes or ARIA roles.

  • type: templ.Attributes