Module Skyline_button_v2Source

Visual style variants for buttons. Each variant provides a different visual treatment while maintaining consistent interaction patterns.

HTML type attribute for the underlying <button/> element.

Renders an icon inside a view which inherits the button's size and styling. Icons can be placed alongside other elements or used on their own for icon-only buttons.

view creates a button component.

• test_selector Optional test selector for unit tests
• attrs Additional Vdom attributes to apply to the button
• size Button size, defaults to `Md. Options: `Xs, `Sm, `Md, `Lg
• slim Whether to reduce horizontal padding for a narrower button (default false). When false, min-width is set to the height which may cause a square appearance. When true, the padding is reduced and the min-width restriction is lifted for a tighter fit. Most useful for icon-only buttons.
• variant Visual style variant, defaults to Filled
• rounded Whether to use fully rounded corners (pill shape)
• disabled Whether the button is disabled, defaults to false
• loading Whether the button shows a loading indicator, defaults to No. When in a loading state the button is also disabled. See Loading for more details.
• intent Color intent for semantic meaning, defaults to `Secondary
• tooltip Text to show on hover
• tooltip_position Position of the tooltip relative to the button
• show_external_link_icon Whether to show an external link icon when opening links in new tabs. Defaults to true
• type_attr HTML type attribute for the underlying <button/> element. Use Submit for form-submit buttons and Button for non-submit buttons. Defaults to Button. If attrs contains Vdom.Attr.type_, the default is not applied. If both type_attr and Vdom.Attr.type_ are provided explicitly, attrs takes precedence and Vdom.Attr emits a duplicate-attribute warning.
• on_click Action to perform when clicked. When passed Effect.open_url, the button renders as an HTML <a/> tag

Example:

  view
    ~size:`Sm
    ~variant:Ghost
    ~intent:`Danger
    ~tooltip:"Delete this item"
    ~on_click:delete_effect
    [ Icon.svg Codicons.Trash; Node.text "Delete" ]

Copy creates buttons used for copying text.

group_style provides CSS styling for visually grouping buttons together.

When buttons are direct children of an element with group_style, their border radii are automatically adjusted so that outer corners are rounded and inner corners are square, creating a seamless button group appearance. Buttons also share borders so that no doubled borders appear between adjacent buttons.

This is purely CSS styling. It does not provide:

• Keyboard navigation between grouped buttons
• ARIA roles or other semantic grouping
• Validation that children are actually buttons

The consumer is responsible for layout (e.g., display: inline-flex) and any accessibility attributes needed for their use case.

Example: Split button pattern

  {%html|
    <div %{Skyline_button_v2.group_style} style="display: inline-flex">
      <Skyline_button_v2.view ~on_click:%{primary_action}>
        Save
      </>
      <Skyline_button_v2.view ~slim:true ~on_click:%{open_menu}>
        <Skyline_button_v2.Icon.view ~icon:%{Lucide.chevron_down} />
      </>
    </div>
  |}