Actions and views

Tag	Attributes	Behavior
button	onClick, variant, size, block, disabled, aria-label	Invokes a callback without a DOM event argument.
pressable	onClick, selected, layout attributes, disabled	An interactive card.
segmented-control	value, onChange, options, aria-label, disabled	Single string selection.

Button variants are default, outline, and ghost; sizes include default, sm, and xs. Use block for full width.

Conditional views

Compose segmented selection with {#if} branches. There is no separate DIL Tabs tag.

DIL source

{@body const [tab, setTab] = DIL.useState("activity")}
<box border padding={5} radius="xl" gap={4}>
  <segmented-control
    value={tab}
    onChange={setTab}
    options={[
      { value: "activity", label: "Activity" },
      { value: "metrics", label: "Metrics" },
      { value: "settings", label: "Settings" },
    ]}
  />
  {#if tab === "activity"}
  <title>Activity</title>
  <text>Pull request merged</text>
  <caption>Just now</caption>
  {:else if tab === "metrics"}
  <title>Requests today</title>
  <title size="2xl">24,801</title>
  <badge color="success">All systems healthy</badge>
  {:else}
  <title>Workspace preferences</title>
  <text>Configure your environment.</text>
  {/if}
</box>

Selection controls support keyboard operation. Name icon-only actions and keep visible button labels concrete. GenUI.copy(text) provides a bounded clipboard action from the onClick of a button or pressable the user activated; calls from other handlers are denied. The calling control briefly shows a “Copied” or “Copy failed” tooltip, and the renderer announces the same outcome to assistive technology.