Skip to main content

Badge

📘 Developer Guide

With the Badge Brick, you can easily add badges to your Dashboard.

🔁 Example

Designer

Screenshot From 2025-10-13 12-39-02.png

Runtime

Screenshot From 2025-10-13 12-39-38.png

⚙️ Configuration Properties

Key Label Description Default Value
label The Label of the badge This string will be displayed in the badge
string		 Badge
id ID of the Badge string UUID Random UUID
size * The size of the Badge Defines the size of the badge
xsmall | small | medium | large		 medium
show Toggles the visibility of the badge Either accepts true or false
boolean		 true
styles The style of the badge Accepts CSSStyleDeclaration as Object
Partial<CSSStyleDelcaration>		 -
defaultStyles.color Defines the text color of the badge Accepts either string like rgb(255,0,0) or a FyzSbBadgeColor
string | FyzSbBadgeColor		 'white'
defaultStyles.backgroundColor Defines the background color of the badge Accepts either string like rgb(255,0,0) or a FyzSbBadgeColor
string | FyzSbBadgeColor		 blue
defaultStyles.nowrap Defines if the text is oneliner If set, the label will not break into new line
Accepts either true or false
boolean		 -

🎨 Available Colors

enum FyzSbBadgeColor  {
	TINT = '#007AFF',
	LABEL = '#404040',
	RED = '#FF3B30',
	ORANGE = '#FF9500',
	YELLOW = '#FFCC00',
	GREEN = '#34C759',
	MINT = '#00C7BE',
	TEAL = '#30B0BE',
	CYAN = '#32ADE6',
	BLUE = '#007AFF',
	INDIGO = '#5856D6',
	PURPLE = '#AF52DE',
	BROWN = '#A2845E',
	GRAY = '#8E8E93',
	FYZ_DEFAULT = '#FF4842',
	FYZ_ORANGE = '#FE8900',
	FYZ_PINK = '#FF2D55',
	BLACK = '#000',
	WHITE = '#ffff',
	TRANSPARENT = 'transparent',
}

🛠️ Usage

Designer

(Use the build in configuration Inputs in the right Side-Nav)

Screenshot From 2025-10-13 12-39-25.png

Runtime

(Edit the whole configuration of the Badge to your liking)

image.png

⌨️ Programmatical Data

How to update the badge via scripting
 
// ⚙️ Retrieve the current configuration of the Brick
const config = fyzBrick.cRef.getConfig();

// 💱 Modify and merge the config to change to the desired button/behavior
fyzBrick.cRef.mergeConfig({
    ...config,
    size: 'large',
    label: 'Changed via scripting',
    defaultStyles: {
        color: 'red',
        backgroundColor: 'white'
    }
})
No Comments
Back to top