Button

Standalone Button with a textual label.

Features

• Support for default button UI
• Focus management options (preventFocusOnPress, excludeFromTabOrder)
• Support for mnemonics.

Remaining

• Default button behaviour is not implemented yet. It's just the appearance at the moment.
• Platform Specific UI. It's based on Mac UI at the moment.

Result

Loading...

Live Editor

<> <Button>Button</Button> <br /> <br /> <Button variant="default">Default</Button> <br /> <br /> <Button variant="icon"> <PlatformIcon icon="actions/help"></PlatformIcon> </Button> <br /> <br /> <Button isDisabled>Disabled</Button> <br /> <br /> <Button excludeFromTabOrder>Exclude from tab order</Button> <br /> <br /> <Button preventFocusOnPress>Prevent focus on press</Button> <br /> <br /> <Button mnemonic="W" onPress={() => alert("Button triggered by mnemonics")}> With Mnemonics </Button> <br /> </>

<>
  <Button>Button</Button> <br />
  <br />
  <Button variant="default">Default</Button> <br />
  <br />
  <Button variant="icon">
    <PlatformIcon icon="actions/help"></PlatformIcon>
  </Button>
  <br />
  <br />
  <Button isDisabled>Disabled</Button> <br />
  <br />
  <Button excludeFromTabOrder>Exclude from tab order</Button> <br />
  <br />
  <Button preventFocusOnPress>Prevent focus on press</Button> <br />
  <br />
  <Button mnemonic="W" onPress={() => alert("Button triggered by mnemonics")}>
    With Mnemonics
  </Button> <br />
</>

Accessibility Caveat

Following the original implementation, there is currently no visual feedback for pressed (active) state. That's more of an issue when preventFocusOnPress is used.

focus visibility

Following the original implementation, the focus ring is visible even when the interaction is done by mouse. It's more common to show focus ring only when interacted with keyboard, but focus being always visible mitigates accessibility issue above.