IconButton keeps compact actions accessible.

Public API

Function	ui.IconButton
Props	ui.IconButtonProps
Render boundary	Render the returned node with gx.RenderHTML when HTML is needed.
Use for	Compact toolbar actions with explicit accessible labels.

Example

Go API

import (
  gx "github.com/busdk/bus-gx/pkg/gx"
  ui "github.com/busdk/bus-ui/pkg/ui"
)

node, err := ui.IconButton(ui.IconButtonProps{
  Label: "Refresh",
  Icon:  ui.IconRefresh,
})
if err != nil {
  return err
}

html, err := gx.RenderHTML(node)

In .gx source, keep the accessible label in props and render the visible icon/text as nested markup.

.gx source

package actionsui

import gx "github.com/busdk/bus-gx/pkg/gx"

type IconButtonProps struct {
  Label string
}

func IconButton(props IconButtonProps) gx.Node {
  return <button class="icon-button" aria-label={props.Label} type="button">
  <span aria-hidden="true"><Text value={"Refresh"}></Text></span>
</button>
}

var refresh = <IconButton label={"Refresh events"}></IconButton>