Skip to main content


UI is a utility class for creating user interfaces. Instance is accessible through the BdApi.




Shows a generic but very customizable modal.

titlestringTitle of the modal
contentstring|ReactElement|Array.<(string|ReactElement)>A string of text to display in the modal

Returns: void


Creates a tooltip to automatically show on hover.

nodeHTMLElementnoneDOM node to monitor and show the tooltip on
contentstring|HTMLElementnoneString to show in the tooltip
optionsobjectnoneAdditional options for the tooltip"primary"|"info"|"success"|"warn"|"danger""primary"Correlates to the Discord styling/colors
options.side"top"|"right"|"bottom"|"left""top"Can be any of top, right, bottom, left
options.preventFlipbooleanfalsePrevents moving the tooltip to the opposite side if it is too big or goes offscreen
options.disabledbooleanfalseWhether the tooltip should be disabled from showing on hover

Returns: Tooltip - The tooltip that was generated.


Gives access to the Electron Dialog api. Returns a Promise that resolves to an object that has a boolean cancelled and a filePath string for saving and a filePaths string array for opening.

optionsobjectnoneOptions object to configure the dialog
options.mode"open"|"save""open"Determines whether the dialog should open or save files
options.defaultPathstring~Path the dialog should show on launch
options.filtersArray.<object.<string, Array.<string>>>[]An array of file filters
options.titlestringnoneTitle for the titlebar
options.messagestringnoneMessage for the dialog
options.showOverwriteConfirmationbooleanfalseWhether the user should be prompted when overwriting a file
options.showHiddenFilesbooleanfalseWhether hidden files should be shown in the dialog
options.promptToCreatebooleanfalseWhether the user should be prompted to create non-existent folders
options.openDirectorybooleanfalseWhether the user should be able to select a directory as a target
options.openFilebooleantrueWhether the user should be able to select a file as a target
options.multiSelectionsbooleanfalseWhether the user should be able to select multiple targets
options.modalbooleanfalseWhether the dialog should act as a modal to the main window

Returns: Promise.<object> - Result of the dialog


Shows a generic but very customizable confirmation modal with optional confirm and cancel callbacks.

titlestringnoneTitle of the modal.
childrenstring|ReactElement|Array.<(string|ReactElement)>noneSingle or mixed array of React elements and strings. Everything is wrapped in Discord's TextElement component so strings will show and render properly.
optionsobjectnoneOptions to modify the modal
options.dangerbooleanfalseWhether the main button should be red or not
options.confirmTextstringOkayText for the confirmation/submit button
options.cancelTextstringCancelText for the cancel button
options.onConfirmcallableNOOPCallback to occur when clicking the submit button
options.onCancelcallableNOOPCallback to occur when clicking the cancel button

Returns: string - The key used for this modal.


Shows a notice above Discord's chat layer.

contentstring|NodenoneContent of the notice
optionsobjectnoneOptions for the notice
options.buttonsArray.<{label: string, onClick: function()}>noneButtons that should be added next to the notice text
options.timeoutnumber10000Timeout until the notice is closed. Will not fire when set to 0.

Returns: function - A callback for closing the notice. Passing true as first parameter closes immediately without transitioning out.


This shows a toast similar to android towards the bottom of the screen.

contentstringnoneThe string to show in the toast
optionsobjectnoneOptions for the toast
options.typestring""Changes the type of the toast stylistically and semantically. Choices: "", "info", "success", "danger"/"error", "warning"/"warn". Default: "".
options.iconbooleantrueDetermines whether the icon should show corresponding to the type. A toast without type will always have no icon. Default: true.
options.timeoutnumber3000Adjusts the time (in ms) the toast should be shown for before disappearing automatically. Default: 3000.
options.forceShowbooleanfalseWhether to force showing the toast and ignore the BD setting

Returns: void