hansui

Appearance

Button ​

A clickable element used to trigger actions, submit forms, or navigate to other pages.

Features ​

  • Full keyboard navigation
  • Can expand one or multiple items

Anatomy ​

  • Root: The root container for the button

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
import "github.com/indaco/hansui/components/button"

@button.New(label string, props ...*button.Props)
  • label - A string representing the text displayed on the button.
  • props - A pointer to the button.Props struct that defines the configuration options for the button (see here).
templ
import "github.com/indaco/hansui/components/button"

@button.New("Button")
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
@button.Default("Builder API").WithBorderStyle("dashed").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
@button.Render("Button", button.WithColor("primary"), button.WithBorderStyle("dotted"))

Button Colors ​

colors...

view the code

Button Variants ​

Outline ​

A minimalist style with a transparent background and a colored border, offering a lightweight, elegant look.

view the code

Light ​

Softly colored backgrounds with subtle borders, giving the buttons a delicate and subdued appearance.

view the code

Lifted ​

Raised buttons with shadows that create a 3D effect, making them stand out from the background.

view the code

Stacked ​

A bold, layered look with solid backgrounds and shadows, giving a sense of depth and structure.

view the code

Brutalist ​

Flat, solid colors with sharp edges and no shadows, creating a strong, utilitarian design.

view the code

Cyberpunk ​

Neon-colored buttons with glowing effects, evoking a futuristic, high-tech aesthetic.

view the code

Retro ​

Muted colors with a vintage vibe, blending simplicity with nostalgic tones for a classic feel.

view the code

Button Sizes ​

view the code

Button Shapes ​

view the code

Button Disabled ​

view the code

Button Borders ​

view the code

Button Focus Ring ​

Focus ring for the button when focused.

view the code
view the code
Link

Button Icons ​

view the code

Button Icon Only ​

view the code

Button Attributes ​

view the code

API Reference ​

button.Props ​

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

Color ​

Sets the color of the button.

  • type: string
  • values: primary, secondary, accent, success, error, warning, info, ghost

Variant ​

Defines the style variant of the button.

  • type: string
  • values: outline, light, lifted, stacked, cyberpunk, brutalist, retro

Size ​

Specifies the button size.

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

Shape ​

Defines the shape of the button.

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

BorderStyle ​

Configures the border style.

  • type: string
  • default: solid
  • values: solid, dashed, dotted, double

Submit ​

If true, renders the button as a submit type.

  • type: bool
  • default: false

Reset ​

If true, renders the button as a reset type.

  • type: bool
  • default: false

FocusRing ​

If true, enables a focus ring for the button when focused.

  • type: bool
  • default: false

Disabled ​

If true, disables the button.

  • type: bool
  • default: false

Block ​

If true, makes the button span the full width of its container.

  • type: bool
  • default: false

Icon ​

Optional icon configuration for position and icon-only button.

  • type: _hansui.IconProps_

Href ​

If set, renders the button as a link (<a> element).

  • type: string

Attrs ​

Additional HTML attributes for the button. Allows you to set custom attributes such as data attributes, ARIA roles or others.

  • type: templ.Attributes