UI

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

Properties

Methods

alert

Shows a generic but very customizable modal.

Parameter	Type	Description
title	string	Title of the modal
content	string|ReactElement|Array.<(string|ReactElement)>	A string of text to display in the modal

Returns: void

---

buildSettingItem

Creates a single setting wrapped in a setting item that has a name and note. The shape of the object should match the props of the component you want to render, check the BdApi.Components section for details. Shown below are ones common to all setting types.

Parameter	Type	Optional	Default	Description
setting	object	❌	none
setting.type	string	❌	none	One of: dropdown, number, switch, text, slider, radio, keybind, color, custom
setting.id	string	❌	none	Identifier to used for callbacks
setting.name	string	❌	none	Visual name to display
setting.note	string	❌	none	Visual description to display
setting.value	any	❌	none	Current value of the setting
setting.children	ReactElement	✅	none	Only used for "custom" type
setting.onChange	CallableFunction	✅	none	Callback when the value changes (only argument is new value)
setting.disabled	boolean	✅	false	Whether this setting is disabled
setting.inline	boolean	✅	true	Whether the input should render inline with the name (this is false by default for radio type)

Returns: void

---

buildSettingsPanel

Creates a settings panel (react element) based on json-like data.

The settings array here is an array of the same settings types described in buildSetting above. However, this API allows one additional setting "type" called category. This has the same properties as the Group React Component found under the Components API.

onChange will always be given 3 arguments: category id, setting id, and setting value. In the case that you have settings on the "root" of the panel, the category id is null. Any onChange listeners attached to individual settings will fire before the panel-level change listener.

onDrawerToggle is given 2 arguments: category id, and the current shown state. You can use this to save drawer states.

getDrawerState is given 2 arguments: category id, and the default shown state. You can use this to recall a saved drawer state.

Parameter	Type	Optional	Default	Description
props	object	❌	none
props.settings	Array.<object>	❌	none	Array of settings to show
props.onChange	CallableFunction	❌	none	Function called on every change
props.onDrawerToggle	CallableFunction	✅	none	Optionally used to save drawer states
props.getDrawerState	CallableFunction	✅	none	Optionially used to recall drawer states

Returns: void

---

createTooltip

Creates a tooltip to automatically show on hover.

Parameter	Type	Optional	Default	Description
node	HTMLElement	❌	none	DOM node to monitor and show the tooltip on
content	string|HTMLElement	❌	none	String to show in the tooltip
options	object	❌	none	Additional options for the tooltip
options.style	"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.preventFlip	boolean	✅	false	Prevents moving the tooltip to the opposite side if it is too big or goes offscreen
options.disabled	boolean	✅	false	Whether the tooltip should be disabled from showing on hover

Returns: Tooltip - The tooltip that was generated.

---

openDialog

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.

Parameter	Type	Optional	Default	Description
options	object	❌	none	Options object to configure the dialog
options.mode	"open"|"save"	✅	"open"	Determines whether the dialog should open or save files
options.defaultPath	string	✅	~	Path the dialog should show on launch
options.filters	Array.<object.<string, Array.<string>>>	✅	[]	An array of file filters
options.title	string	✅	none	Title for the titlebar
options.message	string	✅	none	Message for the dialog
options.showOverwriteConfirmation	boolean	✅	false	Whether the user should be prompted when overwriting a file
options.showHiddenFiles	boolean	✅	false	Whether hidden files should be shown in the dialog
options.promptToCreate	boolean	✅	false	Whether the user should be prompted to create non-existent folders
options.openDirectory	boolean	✅	false	Whether the user should be able to select a directory as a target
options.openFile	boolean	✅	true	Whether the user should be able to select a file as a target
options.multiSelections	boolean	✅	false	Whether the user should be able to select multiple targets
options.modal	boolean	✅	false	Whether the dialog should act as a modal to the main window

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

---

showChangelogModal

Shows a changelog modal in a similar style to Discord's. Customizable with images, videos, colored sections and supports markdown.

The changes option is a array of objects that have this typing:

interface Changes {
    title: string;
    type: "fixed" | "added" | "progress" | "changed";
    items: Array<string>;
    blurb?: string;
}

Parameter	Type	Optional	Default	Description
options	object	❌	none	Information to display in the modal
options.title	string	❌	none	Title to show in the modal header
options.subtitle	string	❌	none	Title to show below the main header
options.blurb	string	✅	none	Text to show in the body of the modal before the list of changes
options.banner	string	✅	none	URL to an image to display as the banner of the modal
options.video	string	✅	none	Youtube link or url of a video file to use as the banner
options.poster	string	✅	none	URL to use for the video freeze-frame poster
options.footer	string|ReactElement|Array.<(string|ReactElement)>	✅	none	What to show in the modal footer
options.changes	Array.<Changes>	✅	none	List of changes to show (see description for details)

Returns: string - The key used for this modal.

---

showConfirmationModal

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

Parameter	Type	Optional	Default	Description
title	string	❌	none	Title of the modal.
children	string|ReactElement|Array.<(string|ReactElement)>	❌	none	Single or mixed array of React elements and strings. Everything is wrapped in Discord's TextElement component so strings will show and render properly.
options	object	✅	none	Options to modify the modal
options.danger	boolean	✅	false	Whether the main button should be red or not
options.confirmText	string	✅	Okay	Text for the confirmation/submit button
options.cancelText	string	✅	Cancel	Text for the cancel button
options.onConfirm	callable	✅	NOOP	Callback to occur when clicking the submit button
options.onCancel	callable	✅	NOOP	Callback to occur when clicking the cancel button
options.onClose	callable	✅	NOOP	Callback to occur when exiting the modal

Returns: string - The key used for this modal.

---

showNotice

Shows a notice above Discord's chat layer.

Parameter	Type	Optional	Default	Description
content	string|Node	❌	none	Content of the notice
options	object	❌	none	Options for the notice
options.type	string	✅	"info"	"error"
options.buttons	Array.<{label: string, onClick: function()}>	✅	none	Buttons that should be added next to the notice text
options.timeout	number	✅	10000	Timeout 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.

---

showToast

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

Parameter	Type	Optional	Default	Description
content	string	❌	none	The string to show in the toast
options	object	❌	none	Options for the toast
options.type	string	✅	""	Changes the type of the toast stylistically and semantically. Choices: "", "info", "success", "danger"/"error", "warning"/"warn". Default: "".
options.icon	boolean	✅	true	Determines whether the icon should show corresponding to the type. A toast without type will always have no icon. Default: true.
options.timeout	number	✅	3000	Adjusts the time (in ms) the toast should be shown for before disappearing automatically. Default: 3000.
options.forceShow	boolean	✅	false	Whether to force showing the toast and ignore the BD setting

Returns: void

---