Overview

A badge is a small, visual element typically used in user interfaces to highlight or categorize information. Badges are often displayed as small, colorful labels or indicators, usually attached to an item, such as a text block, button, or icon.

Common uses for badges include:

Labeling Information: Badges can be used to categorize or tag items, such as marking something as "New," "Important," or "Featured."
Status Indicators: They can reflect the status of an item, like "Active," "Completed," or "Pending."

Badges are primarily used to draw attention to specific pieces of information.

Attributes:

Attributes are the options available for each component, allowing you to customize its appearance and functionality. They help you tailor the look and behavior of your components to fit your needs.

Basic

Attribute Name	Description
Label	"Label" is refers to the name that is displayed to users. You can include label from multiple value source. Reference: Label value source
Variant	Variant Change the color of the badge name. below are the different variants Default: Default color is dark grey. Inverse: Change the badge color to dark grey. Lightest: Change the badge color to white. Success: Change the badge color to Green. Warning: Change the badge color to Orange. Error: Change the badge color to Red.
Left Icon	This field lets you choose different icon to display on the left side of the badge.
Right Icon	This field lets you choose different icon to display on the Right side of the badge.

UI

Attribute Name	Description
Padding Location	Padding Location typically refers to the configuration of spacing around elements.
Padding Size	Padding Size refers to the amount of space added inside an element, between the element's content and its border or edge.
Margin Location	Margin Location refers to the spacing around the outside edge of an element.
Margin Size	Margin Size refers to the amount of space around the outside edges of an element.
Style	It is used to apply custom styles to section, such as color, font, size, and more. It allows you to define the appearance of a component by specifying CSS properties directly within the attribute.
Classes	It is used to apply SLDS classes to component, if needed.
Flow Type	It specifies the arrangement of content within the section, allowing users to choose between different layout flows as ‘Fit to content’ or ‘Equally distributed’.
Show Border	It is used to simply add border surrounding the section. Note: Currently, noKodr supports only black borders.

Visibility and Component:

Attribute Name

Description

Visibility Type

It determines whether a component is visible on the layout. It offers the following visibility types:

Always: The component will always be visible.
Conditional: The component's visibility is determined based on specific criteria, which can make it either visible or hidden as needed.
You can explore more about Visibility Type attribute

Component Label

It simply shows the name of the component.

Events:

Events are essentially the automation of invoking the component's actions.
Here, only onload event actions are available for this components.

In the image below, you can select the created workflows.

Note: "You need to create a workflow for selecting from this list.

For more information about Workflow check this out.

Reference: Workflow

Onload Event:

We have an onload event that runs when the component is loaded

For example, when a form is loaded, you can choose fields to be prepopulated by mapping field values using input mapping at the time the form component is loaded.

Input Mapping

Input Mapping: Whenever an event is triggered and you want to pass data to destinations such as models, variables, or components, you can use input mapping to achieve that.