Button

A button that presses with a mouse, a touch, a pen, Enter, Space, or a screen reader. Each way calls the same handlers.

<script>
  import { $signal } from 'brumate/signals';
  import Button from '@brumate/ui/Button.brm';

  let presses = $signal(0);
  let last = $signal('');
</script>

<Button
  class="ui-button"
  onPress=((event) => {
    presses++;
    last = event.pointerType;
  })
>Press me</Button>
<Button class="ui-button" isPending>Saving</Button>
<Button class="ui-button" isDisabled>Disabled</Button>
<p>Pressed {presses === 1 ? 'once' : `${presses} times`}{last ? `, last with ${last}` : ''}.</p>

• onPress runs when a press ends on the button. onPressStart, onPressEnd, onPressUp and onPressChange follow each step, and their event has pointerType: mouse, touch, pen, keyboard or virtual.
• onHoverStart, onHoverEnd and onHoverChange follow a mouse or a pen. A touch never hovers.
• isDisabled sets disabled on the button. isPending keeps its focus and presses nothing, such as while a form sends.
• type is button by default, so a button in a form does not send it. Use type="submit" for one that does.
• as renders another element, such as as="a", with role="button" and a place in the order of Tab. as takes the name of an element or a component, and the other props are those of the target, so as="a" takes href, and a prop that the target does not take is a type error. ButtonProps is the props type. See Props types.
• A press that leaves the button ends without onPress, and starts again when the pointer comes back. Space never scrolls the page.

Attributes

In other parts

Many parts give the Button inside them its role, its state and its handlers through a context, such as the trigger of a Disclosure, of a DialogTrigger or of a TooltipTrigger. slot picks the button that a part means, such as slot="close" in a Dialog. The handlers of the part run first, then yours.