Function Button

Parameters

• options: {
      name?: string;
      disabled?: boolean;
      icon?: ComponentChildren;
      label?: string;
      title?: string;
      look?: "subtle" | "normal" | "strong";
      mode?: "normal" | "safe" | "commit" | "alert" | "danger";
      type?: "button" | "submit" | "reset";
      onClick?: (event: TargetedMouseEvent<HTMLButtonElement>) => void;
  } & ({ name: string } | { label: string } | { title: string })

  The widget configuration

  • Optionalname?: string

    The accessible name, required where a glyph stands alone and no title names the button; where a label is shown as well, it must include the text of that label, so that a reader asking for the control by what they see reaches it.

  • Optionaldisabled?: boolean

    Whether the button is inactive, greyed and out of the tab order like any disabled control; live if omitted.

  • Optionalicon?: ComponentChildren

    The glyph marking the action, shown before the label and hidden from assistive technology unless labelled itself.

  • Optionallabel?: string

    The text the button shows, naming it unless name does; omitted only where name or title names the glyph.

  • Optionaltitle?: string

    The hint the platform shows on resting the pointer on the button, such as the shortcut it answers to or what a glyph stands for at greater length than its name; no hint if omitted.

    Beside a label or a name it names nothing. On a glyph standing alone with no name it names the button, and is then spoken as a name rather than as an aside, so it states what the button does before any shortcut. Either way it reaches neither a reader who never rests the pointer nor one on a touch screen, so whatever a reader has to take in to use the control belongs in the label or beside it rather than here.

  • Optionallook?: "subtle" | "normal" | "strong"

    How loud the button appears, told in weight, rule and room rather than in colour, so it stays legible wherever colour does not reach: subtle keeps no rule and reads as part of the text around it, strong is bounded and set heaviest, and normal sits between the two. The appearance is independent of what the button means, which mode states.

    A button stating nothing takes the look the area around it is written in, from the --tile--look token the design system carries, which is normal where nothing assigns it. Stating a look here answers to that alone, so one loud control in a quietened toolbar stays loud.

  • Optionalmode?: "normal" | "safe" | "commit" | "alert" | "danger"

    What activating the button will do, told in colour on the four-step scale every meaning in the interface lands on: safe is the harmless one where another destroys (info), commit makes a change stick (pass), alert asks for a second thought (warn), danger destroys (fail), and normal, the default, says nothing in particular and takes no colour at all. The four are built alike, a tinted fill ordered by hue, so none of them shouts past its neighbours and how loud the button appears stays look's business. A mode is never told in colour alone, so a button carrying one says the same thing in its label or its glyph.

  • Optionaltype?: "button" | "submit" | "reset"

    What the button does to the form it sits in: submit sends it, reset restores it, and button, the default, leaves it alone, so that a button inside a form behaves as one outside it unless asked otherwise.

  • OptionalonClick?: (event: TargetedMouseEvent<HTMLButtonElement>) => void

    What activating the button is handed to, whether the activation comes from a pointer, from Enter or from Space; a button whose work is done by the form it submits or resets if omitted. The activation event is handed over as it stands, so a handler may read the modifier keys it carries or stop a submit or reset from reaching the form.

  • { name: string }
  • { label: string }
  • { title: string }