This topic provides information on List of Components.

The plugin supports a range of components that streamline the design and development process. Components from the following component libraries are supported by the UX Plugin:

• Redwood Design System (RDS) - Oracle’s flagship design system offering consistent UI patterns and components, enabling seamless plugin integration
• Oracle JET - JavaScript Extension Toolkit offering responsive templates and interactive components, optimized for data-intensive enterprise applications.
• OBDX Components Library - Oracle Banking Digital Experience (OBDX) components tailored for financial applications, featuring specialized UI elements for banking interfaces

List of RDS supported components:

1. Avatar
2. Badge
3. Button
4. Checkbox set
5. File Picker
6. Input Date
7. Input Number
8. Input Password
9. Input Select Single (supports Figma interaction in case of static dropdown values)
10. Input Text
11. Input Text Area
12. Meter Bar
13. Radio Button
14. Rating Gauge
15. Slider
16. Switch
17. Tab Bar
18. Table
19. Toggle Button

List of Oracle JET supported components:

1. Action Card (JET Version)

   An Action Card is an actionable container rendering related information. An action card renders children in a styled rectangular area and has support for an action event when clicked.

   It has a single property of instance swap that allows the designers to place their content in the body slot of the card.

   Link to JET Component

2. Charts

   A chart displays information graphically, making relationships among the data easier to understand.

   Plugin supports the following chart types:

   • Bar Chart
   • Line Chart
   • Pie Chart

   Following are the properties of this component:

   • Chart Type: Bar, Line, Pie
   • Legend Position: Bottom, Top, Start, End
   • Show Legend: Boolean
3. Collapsible (JET Version)

   A collapsible displays a header that can be expanded to show its content.

   Following are the properties of this component:

   • Variant – Basic, Horizontal Rule
   • Header – Instance Swap
   • Body – Instance Swap

   Link to JET Component

4. Column Share

   The Column Share component is designed to allocate and display data in a column-based format. It enables the division of content into proportional sections for better layout and organization.

   Following are the properties of this component:

   • Columns – 2,3
   • Field Size – 25-75, Equal, 40-60, 75-25, 60-40

   Note:

   To create more than 3 column layout the designer can combine two form layouts and achieve the desired column structure.
5. Conveyor Belt

   A conveyor belt manages overflow for its child elements and allows scrolling among them.

   Following are the properties of this component:

   • Orientation – Horizontal, Vertical
   • Arrow Visibility – Auto, Visible, Horizontal
   • Item Template – Instance Swap

   Link to JET Component

6. Drawer (JET Version)

   A Drawer Popup is a panel that slides into the viewport. It can be placed at the start, end or bottom edge and it always overlays the page.

   Following are the properties of this component:

   • Edge – Start, End
   • Body – Instance Swap
   • Header – Boolean
   • Header Text – Text Input
   • Sub Header – Boolean
   • Sub Header Text – Text Input
   • Hide Close Icon – Boolean
   • Show Footer – Boolean

   Link to JET Component

7. Link

   The Link component is used to create clickable text elements that navigate users to external URLs, internal pages, or trigger specific actions within the application.

   Following are the properties of this component:

   • State – Default, Primary, Secondary, Disabled
   • Type – Standalone, Embedded
   • Label – Text Input

   Note:

   Use Figma's native prototyping feature for links that trigger components within the same page. For links that redirect to separate pages or external locations, handle them using the UI Toolkit.
8. List Item Layout (JET Version)

   A List Item Layout represents layout used for list view item elements. To create a list view combine all list items and add them in a frame.

   Following are the properties of this component:

   • Leading – Boolean & Instance Swap
   • Default – Instance Swap
   • Secondary – Boolean & Instance Swap
   • Tertiary – Boolean & Instance Swap
   • Overline – Boolean & Instance Swap
   • Metadata – Boolean & Instance Swap
   • Trailing – Boolean & Instance Swap
   • Action – Boolean & Instance Swap
   • Bottom Slot – Boolean
     • Quaternary – Boolean & Instance Swap
     • Navigation – Boolean & Instance Swap

     Note:

     Designers are recommended to use this component instead of RDS Component as this has been re-created specifically for the purpose of making it more compatible with the plugin.

     Link to JET Component

9. List View (JET Version)

   A list view displays data items as a list or a grid with highly interactive features.

   Following are the properties of this component:

   • Gridlines – Hidden, All, In Between
   • Drilldown – True, False
   • Item Template – Instance Swap

   Note:

   Designers are recommended to use this component instead of RDS Component as this has been re-created specifically for the purpose of making it more compatible with the plugin.
10. Modal Dialog (JET Version)

    A dialog displays a popup window that provides information and gathers input from the application user. Modal dialogs require interaction before control can be returned to the outer window.

    Following are the properties of this component:

    • Hide Header – Boolean
    • Body – Instance Swap
    • Close Button – Boolean
    • Footer – 3 buttons, 2 buttons, 1 button

    Link to JET Component

11. Progress Bar
    1. A progress bar allows the user to visualize the progression of an extended computer operation.

       Following are the properties of this component:

       • Value: 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%

       Link to JET Component

12. Progress Circle

    A progress circle allows the user to visualize the progression of an extended computer operation.

    Following are the properties of this component:

    • Value: 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%

    Link to JET Component

13. Spark Chart

    A spark chart displays information graphically, typically highlighting the trend of a data set in a compact form factor.

    Following are the properties of this component:

    • Status – Neutral, Success, Critical
    • Direction: Up, Down, No Change
    • Type – Line, Line with Area

    Link to JET Component

14. Table

    A table displays data items in a tabular format with highly interactive features.

    Following are the properties of this component:

    • Number of Columns: From 2, up to 12
    • Text Only: True, False

    Link to JET Component

1. Account Input

   This is a custom input field created specifically to select an account from a list of accounts fetched from a pre-configured API. It has two display modes: dropdown view and card view.

   Following are the properties of this component:

   • Display: Dropdown, Card
   • Label: Text Input
   • Read Only: Boolean
   • Hide Label: Boolean
   • Value: Boolean
2. Address

   The Address component is designed for entering address information within a form. It includes two elements: address input and address selection.

   Following are the properties of this component:

   • Read Only – Boolean
   • Type – Saved Address, Branch Near Me, Custom
   • Address Enabled – Boolean
3. Amount Input

   The Amount Input component is specifically designed for entering monetary values in a form. It supports input fields for currency formatting and precise value entry.

   Following are the properties of this component:

   • Label Hidden – Boolean
   • Read Only – Boolean
   • Currency List – Boolean
   • Mandatory – Boolean
   • Label – Text Input
   • View Limits – Boolean
4. Icon

   This component was created specifically to identify the correct icon from the Redwood icon repository. It is recommended that designers use this component when incorporating icons independently.

   It has only one property of instance swap for selecting the correct icon.

5. Internal Account Input

   The Internal Account Input component is designed for entering account numbers in a format commonly used in the banking domain. It consists of two input fields: a primary field for the account number and a secondary field for confirming the account number.

   Following are the properties of this component:

   • Required – Boolean
   • Mask – Boolean
   • State – Default, Filled
   • Read Only – Boolean
   • Confirm Style Account – Boolean (for the secondary account number field)
   • Confirm Label – Text Input
   • Label – Text Input
6. Page Section

   The Page Section component creates distinct sections on a page, allowing for clear organization and layout. It is especially useful for structuring forms, such as those needed for transaction screens.

   Following are the properties of this component:

   • Page Heading – Boolean
   • Header Template – Boolean (for hiding the controls present on the header)
7. Phone Input

   Phone Input allows users to input mobile number along with a dropdown for country code

   Following are the properties of this component:

   • Read Only – Boolean
   • Without Label – Boolean
   • Required – Boolean
8. Quick Action Button

   The Quick Action Button provides a shortcut to specific tasks or actions related to modules or transactions, streamlining user interaction. It consists of an avatar, primary text and a custom slot.

   Following are the properties of this component:

   • Primary Text – Text Input
   • Custom Slot – Boolean & Instance Swap
   • Avatar – Dedicated Component Properties (defined by Redwood)
9. Row

   The Row component displays read-only data in a label-value format, allowing designers to customize how the information is presented.

   Following are the properties of this component:

   • Type – Primary, Secondary, Disabled, Success, Warning, Danger
   • Size – 2XS, XS, SM, MD, LG, XL
   • Label – Text Input