Trilium Frontend API
    Preparing search index...

    Interface Button

    The button interface. Implemented by, among others, module:ui/button/buttonview~ButtonView, module:ui/dropdown/button/splitbuttonview~SplitButtonView and module:ui/dropdown/button/dropdownbuttonview~DropdownButtonView.

    interface Button {
        ariaLabel?: string;
        ariaLabelledBy?: string;
        class: string;
        icon: string;
        isEnabled: boolean;
        isOn: boolean;
        isToggleable: boolean;
        isVisible: boolean;
        keystroke: string;
        label: string;
        labelStyle: string;
        role?: string;
        tabindex: number;
        tooltip: string | boolean | ((label: string, keystroke: string) => string);
        tooltipPosition: "s" | "w" | "n" | "e" | "sw" | "se";
        type: "reset" | "submit" | "button" | "menu";
        withKeystroke: boolean;
        withText: boolean;
    }

    Implemented by

    Index

    Properties

    ariaLabel? ariaLabelledBy? class icon isEnabled isOn isToggleable isVisible keystroke label labelStyle role? tabindex tooltip tooltipPosition type withKeystroke withText

    Properties

    ariaLabel?: string

    (Optional) The ARIA property reflected by the aria-label DOM attribute used by assistive technologies.

    ariaLabelledBy?: string

    (Optional) The ARIA property reflected by the aria-ariaLabelledBy DOM attribute used by assistive technologies.

    class: string

    (Optional) The additional CSS class set on the button.

    icon: string

    (Optional) An XML module:ui/icon/iconview~IconView#content content of the icon. When defined, an iconView should be added to the button.

    The user must provide the entire XML string, not just the path. See the {@glink framework/architecture/ui-library#setting-label-icon-and-tooltip UI library} guide for details.

    isEnabled: boolean

    Controls whether the button view is enabled, i.e. it can be clicked and execute an action.

    To change the "on" state of the button, use #isOn instead.

    true
    isOn: boolean

    Controls whether the button view is "on". It makes sense when a feature it represents is currently active, e.g. a bold button is "on" when the selection is in the bold text.

    To disable the button, use #isEnabled instead.

    true
    isToggleable: boolean

    Controls whether the button view is a toggle button (two–state) for assistive technologies.

    false
    isVisible: boolean

    Controls whether the button view is visible. Visible by default, buttons are hidden using a CSS class.

    true
    keystroke: string

    (Optional) The keystroke associated with the button, i.e. CTRL+B, in the string format compatible with module:utils/keyboard.

    Note: Use module:ui/button/button~Button#withKeystroke if you want to display the keystroke information next to the module:ui/button/button~Button#label label.

    label: string

    The label of the button view visible to the user when #withText is true. It can also be used to create a #tooltip.

    labelStyle: string

    (Optional) The value of the style attribute of the label.

    role?: string

    (Optional) The property reflected by the role DOM attribute to be used by assistive technologies.

    tabindex: number

    (Optional) Controls the tabindex HTML attribute of the button. By default, the button is focusable but does not included in the Tab order.

    -1
    tooltip: string | boolean | ((label: string, keystroke: string) => string)

    (Optional) Tooltip of the button, i.e. displayed when hovering the button with the mouse cursor.

    • If defined as a Boolean (e.g. true), then combination of label and keystroke will be set as a tooltip.
    • If defined as a String, tooltip will equal the exact text of that String.
    • If defined as a Function, label and keystroke will be passed to that function, which is to return a string with the tooltip text.
    const view = new ButtonView( locale );
    view.tooltip = ( label, keystroke ) => `A tooltip for ${ label } and ${ keystroke }.`

    false
    tooltipPosition: "s" | "w" | "n" | "e" | "sw" | "se"

    (Optional) The position of the tooltip. See module:ui/tooltipmanager~TooltipManager to learn more about the tooltip system.

    Note: It makes sense only when the #tooltip tooltip attribute is defined.

    's'
    type: "reset" | "submit" | "button" | "menu"

    The HTML type of the button.

    'button'
    withKeystroke: boolean

    (Optional) Controls whether the keystroke of the button is displayed next to its module:ui/button/button~Button#label label.

    Note: This property requires a module:ui/button/button~Button#keystroke keystroke to be defined in the first place.

    false
    withText: boolean

    (Optional) Controls whether the label of the button is hidden (e.g. an icon–only button).

    false

    Settings

    Member Visibility

    On This Page

    Properties