How to create Badges?
Last updated
Last updated
The badge in the command bar serves as a visual indicator, providing quick insights or status information associated with specific commands.
To initiate the badge creation process, navigate to the beacon bar in the sidebar and choose the "Badges" option, or use the shortcut "Command + K" (for Mac) or "CTRL + K" (for Windows) and enter "Badges" then click on "Create Badge" button.
Within the content tab, provide a name for the badge as a reference. In the search and select commands dropdown, you have the option to search for either created commands or connected helpdocs. You can add multiple commands or help docs.
Navigate to the Styles tab to customize the badge. You can choose from three options: manually add, upload an image, or select none.
Opt for the "Add Manually" option to include both an icon and text for the badge. Additionally, you can enhance the badge by incorporating a border through the border color option. Utilize the toggle switch for the flexibility to disable unwanted elements.
On the right-side section, preview the badge, and utilize the dark mode toggle switch to observe how it will appear in dark mode.
To emphasize the entire command, you can apply a border or background by clicking the "Add Highlighter" button located at the bottom right.
By using the action text color and description color options, you can customize the color of the command text and description. This provides flexibility in addition to setting colors or gradients for the entire command, including borders and backgrounds.
Highlighters can be added in all three options: "Add Manually," "Upload Image," and "None."
Within the "Upload Image" option, instead of text, you can incorporate an image and customize it with features like animation, size, and alignment.
Choosing the "None" option limits the addition of only highlighter to the commands.
Navigate to the Settings tab to define command behavior by incorporating segments. Additionally, you have the option to override command behavior with either another command or a specified path.
Refer to the screenshot below to visualize how the badges will appear in your dashboard command palette.