Mnemonic

Implements mnemonic UX pattern, for actionable components. See more.

tip

MnemonicTrigger is typically not used directly as it's used internally in components like Button and Checkbox. Only use it if implementing the same pattern for a custom component.

Live example

Result

Loading...

Live Editor

<> <MnemonicTrigger mnemonic="P" onTriggered={() => alert("First!")} isDisabled={false} > Press Alt+P to activate mnemonic </MnemonicTrigger> <br /> <MnemonicTrigger mnemonic="m" onTriggered={() => alert("Second!")} isDisabled={false} > Hold <code>Alt</code> to activate <MnemonicText>mnemonic</MnemonicText> </MnemonicTrigger> </>

<>
  <MnemonicTrigger
    mnemonic="P"
    onTriggered={() => alert("First!")}
    isDisabled={false}
  >
    Press Alt+P to activate mnemonic
  </MnemonicTrigger>
  <br />
  <MnemonicTrigger
    mnemonic="m"
    onTriggered={() => alert("Second!")}
    isDisabled={false}
  >
    Hold <code>Alt</code> to activate <MnemonicText>mnemonic</MnemonicText>
  </MnemonicTrigger>
</>

info

Implementation of mnemonic for Menu (currently not done) doesn't require MnemonicTrigger as it's activated based on the focus being on the menu, without requiring a separate activation key (Alt).