Versions Compared

Version Old Version 13 New Version 14
Changes made by

Content Writers

Content Writers

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • 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 are the options available for each component, allowing you to customize its appearance and control their behavior. It includes various sections explained below.

Basic:

...

Attribute Name

Description

Component Size

  • This allows users to modify the size of a specific component according to the grid size of layout.

  • This feature allows for flexible customization, enabling users to resize components to fit their specific needs within the defined grid structure.

Panel
panelIconId1f5e8
panelIcon:speech_left:
panelIconText🗨️
bgColor#F4F5F7

For example,
If the layout grid size is 3 then layout is divided into 3 sections then you can changes the components size between 1 to 3.

Label

"Label" is refers to the name that is displayed to users.

Info

You can include label from multiple value source. Reference: Merge Text

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.

Base UI:

...

Include Page
UI Attributes
UI Attributes

UI State:

...

Attribute Name

Description

Visibility Type

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

  1. Always: The component will always be visible.

  2. 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 here.

Info

Reference: Conditional Visibility

Include Page
Visibility and Disability
Visibility and Disability

Events

...

Include Page

...

Events (Common)
Events (Common)