Skip to main content

Component | Header

Render header text.

ui.header("Hello world!")

Color & Size​

Use the color and size properties to quickly change the appearance of the header. See the API reference below for the full list of supported values for each.

page.add(() => ui.stack(
    [
        ui.header("Users Dashboard", { size: "lg" }),
        ui.header("Section 1: Existing users", { 
          color: "text-secondary", 
          size: "xs" 
        })
    ]
))

API reference​

Function signature​

ui.header(
    text: string,
    properties?: Partial<{
        color: "text" | "text-secondary" | "primary" | "success" | "warning" | "danger" | "background",
        size: "xs" | "sm" | "md" | "lg" | "xl",
        style: Style
    }>
)

Parameters​

text

required string
The text to be displayed.

properties.color

optional string literalSDK v0.19.1+

Specifies the color of the header. Defaults to "text"

Options:

  • "text": Default text color
  • "text-secondary": Secondary text color, uses a lighter shade of the default text color
  • "primary": Primary color. Defaults to a shade of blue. Can be set via the theme.
  • "success": Success color, green.
  • "warning": Warning color, orange.
  • "danger": Danger color, red.
  • "background": Background color. Can be used over inverted backgrounds.

properties.size

optional string literalSDK v0.19.1+

Specifies the size of the header. Defaults to "md"

Options:

  • "xs": Extra small header
  • "sm": Small header
  • "md": Medium header
  • "lg": Large header
  • "xl": Extra large header

properties.style

optional Style

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.