Property Reference

Variables

Global style declarations separated by categories, which are based on the general purpose of the variable (Color, Typography, etc.).

Brand Colors [[]]

Brand colors are color variables created with the explicit purpose of creating a color palette for an app. Any color that plays a role in company branding should be found here. By default, Skuid provides a few colors and color palettes, but any default can be changed, or new colors can be created, to reflect a company aesthetic.

Properties

  • Label: The name of the variable.

    Note

    Naming colors is one of the more important steps of building a design system. Check out Naming Best Practices before starting to create color variables.

  • Color: The hexadecimal value of that represents the base color of the variable. The color property accepts hex, rgb, and hsl values as input. Clicking the color property field opens a swatch editor which allows the user to select a color by physically adjusting, hue, tint, base, and opacity.

  • Variants: Lighter and darker variants of the base color that may be selected wherever the variable is used. Variants can be added with the Add button, and then entering a value to lighten/shade the base color by. Generally, web designers use (+/-) 20, 40, 60, and 80 percent tint and shade values of the base color to make a unified color palette.

Functional Colors [[]]

Functional color variables are created with the explicit purpose of assigning a brand color to a functional name–for example, assigning brand color Skuid blue to a Font Color variable.This allows for clarity when styling components. Instead of searching for the correct shade of Skuid Blue in a color list when customizing a font, simply apply the Font Color variable.

Properties

  • Label: The name of the variable.

    Note

    Naming colors is one of the more important steps of building a design system. Check out Naming Best Practices before starting to create color variables.

  • Brand Color: The brand color you wish to assign to a new functional name.

Borders [[]]

Borders surround an element, separating it from other elements.

Properties

  • Border Radius: Rounds the corners of the element border.
  • Border Size: Sets the thickness of the element border.
  • Border Style: Changes the border from the default, solid style to dashed or dotted.

Opacity [[]]

Opacity sets the transparency level of an element. A higher opacity level means an element will be less transparent. A lower opacity level means an element will be more transparent.

Properties

  • Label: The name of the variable.
  • Opacity: Sets the transparency level of the variable on a range from 0% to 100% where 0% equals complete transparency and 100% no transparency.

Shadows [[]]

Gives an element a shadow effect around its frame.

Properties

  • Label: The name of the variable.
  • Shadow:
    • X: Sets the shadow to display on the X axis, or to the right of the element on which it’s applied.
    • Y: Sets the shadow to display on the Y axis, or on the bottom of the element on which it’s applied.
    • Blur: Increases or decreases the blurriness on the applied shadow.
    • Spread: Specifies how far the applied shadow is cast off the element.
    • Color: Sets the color of the shadow. Defaults to black.
    • Inset: Applies the shadow to the inside of the element, giving the element an effect of depth.

Spacing [[]]

Determines how much space is between elements using custom size values. By default, spacing variables are set to Skuid standards.

Properties

  • Extra Small: Default spacing of 4 px.
  • Small: Default spacing of 8 px.
  • Reduced: Default spacing of 12 px.
  • Regular: Default spacing of 16 px.
  • Increased: Default spacing of 24px
  • Large: Default spacing of 32 px.
  • Extra Large: Default spacing of 40 px.
  • Huge: Default spacing of 48 px.

Typography [[]]

The properties that allow customization to the color, size, spacing, font, and shape of text.

Properties

  • Font Family: Specifies which particular font face is used for text.
    • Font: The primary font face that will be applied whenever text is used in a component or element.
    • Fallback Font: The alternate text that displays if a browser doesn’t support the primary font.
  • Font Size: Specifies the size of the font.
    • Label: The label of the component or element.
    • Font Size
  • Font Weight: Specifies the boldness of the font.
    • Label: The label of the component or element.
    • Font weight
  • Line Height: Specifies how many pixels separate each line.
    • Label: The label of the component or element.
    • Line Height

Components

The components list in the DSS is made up of the drag and drop components found in the app composer, as well as their child components.

Accordion [[]]

Properties

  • Label: The label of the component or element.

  • Basic

    • Content Padding
  • Header

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Header Text Color

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

Autocomplete [[]]

The Autocomplete component suggests search queries based on the data the search is connected to.

Note

Autocomplete variants will be usable in the Search component.

Properties

  • Label: The label of the component or element.

  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.

    • Input (Input Text): This component’s input text styles are defined by variants in the Input Text component.
    • Dropdown (Menu): This component’s Dropdown styles are defined by variants in the Menu component.
  • Tag

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Text Color

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

Badge [[]]

Properties

  • Label: The label of the component or element.

  • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

  • Color

  • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

    • Size: The thickness of the border. Size values are based on available border size variables.
    • Style: Changes border from the default solid style to dashed or dotted.
  • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

  • Font Family: Specifies which particular font face is used when rendering text. Font family values are based on available typography variables.

  • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

  • Height: Adjusts the size of the pill container around the text.

  • Padding: The space around the content of an element. Padding values are based on available spacing variables.

Button [[]]

The Button component is an object that represents a clickable button. You can style buttons for countless use cases across your app. Need a circular button to go to the next page in a list? A green button to submit a form? Style it here.

Note

Button variants will be usable in these components:

  • Button Group
  • Button Indices
  • Datepicker
  • File Upload
  • Value Stepper
  • Wizard

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.

    • Icon on left
    • Icon on right
    • Icon only
    • Disabled
    • No Icon
  • Label: The label of the component or element.

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Color: Sets the color of the text within the button.

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.

    • Font Family: Specifies which particular font face is used when rendering text. Font family values are based on available typography variables.

    • Text Transform: Specifies whether the text should be upper or lower case.

    • Letter Spacing: Determines the spacing between each button text character.

    • Height: Sets the button height.

    • Width: Sets the button width.

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

  • Focus State: The appearance of a component element when it’s selected and ready for user interaction/input. Focus state is also used when a user employs the keyboard to “tab” through elements on a page.

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Text Color

  • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Text Color

  • Active State: The appearance of a component element in the time between the click and release of a user.

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Text Color

  • Selected State: The appearance of a component element when it has been selected or highlighted and remains on the page.

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Text Color

  • Disabled State: The appearance of a component element when a user cannot interact with it.

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Text Color

    • Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.

Button Group [[]]

The Button Group component works in tandem with the Button component to create a group of any custom or default buttons.

Note

Button Group variants will be usable in these components:

  • Deck
  • Form
  • List
  • Table

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.
    • Detached buttons
    • Attached buttons
    • A combo button
    • A warning border
  • Label: The label of the component or element.
  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.
    • Button (Button): This component’s button styles are defined by variants in the Button component.
  • Warning
    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.
  • Detached
    • Spacing: Determines how much space is between elementgs using variables set within the Spacing variable category. All spacing values are all relative to the spacing options set within the spacing variable

Button Indices [[]]

The Button Indices component uses the Button component’s “Circular” variant to create a group of buttons allowing the user to navigate through pages.

Note

Button Indices variants will be usable in these components:

  • Deck
  • List

Properties

  • Label: The label of the component or element.
  • Basic
    • Index Spacing: Sets the spacing between the index buttons.
    • Previous Next Spacing: Sets the spacing between the Next and the Previous buttons.
  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.
    • Previous Next (Button): This component’s previous next styles are defined by variants in the Button component.
    • Indices (Button): This component’s button styles are defined by variants in the Button component.

Button Set [[]]

Properties

  • Label: The label of the component or element.
  • Button Group Spacing: Sets the spacing between the buttons in the button groups.

Chart [[]]

Properties

  • Label: The label of the component or element.
  • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
  • Color Palette: A set of colors used to delineate areas within the pie chart.

Checkbox [[]]

The Checkbox component is a square box that is checked or ticked when activated, like you might see on a printed form. Checkbox gives the ability to select single values for submission.

Note

Checkbox variants will be usable in these components:

  • Checkbox List
  • Form
  • Radio List
  • Table

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.

    • Default
    • With label
  • Label: The label of the component or element.

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Size: Sets the height and width of checkbox item.

  • Label

    • Text Color
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
    • Padding: The space around the content of an element. Padding values are based on available spacing variables.
  • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

  • Focus State: The appearance of a component element when it’s selected and ready for user interaction/input. Focus state is also used when a user employs the keyboard to “tab” through elements on a page.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

  • Active State: The appearance of a component element in the time between the click and release of a user.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

  • Checked: The appearance of the checkbox when it is pressed.

    • Check Color: Sets the color of the checkmark.

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
  • Disabled State: The appearance of a component element when a user cannot interact with it.

    • Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.
    • Check Color: Sets the color of the checkmark.
    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
    • Border Color

Checkbox List [[]]

The Checkbox List component is a group of square boxes that are checked or ticked when activated, like you might see on a printed form. Checkbox gives the ability to select individual values for submission.

Note

Checkbox List variants will be usable in these components:

  • Form
  • Select

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.
    • Default
    • With sublists
  • Label: The label of the component or element.
  • Basic
    • List Item Spacing: Sets the spacing between the checkboxes.
    • Sublist Item Indentation: Increases or decreases the indentation of the items in a sublist.
  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.
    • Checkbox (Checkbox): This component’s checkbox styles are defined by variants in the Checkbox component.

Datepicker [[]]

The Datepicker component allows the user to select a date.

Note

Datepicker variants will be usable in the Input Text component.

Properties

  • Label: The label of the component or element.
  • Basic
    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
    • Spacing Between Rows: Sets the space between each calendar row.
  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.
    • Date (Button): This component’s date styles are defined by variants in the Button component.
  • Labels
  • Text Color
  • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
  • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
  • Date
  • Disabled State: The appearance of a component element when a user cannot interact with it.
  • Opacity: Sets the transparency level of unavailable dates on the datepicker.

Datetime [[]]

The Datetime component allows the user to select a date and time.

Note

Datetime component variants will be usable in these components:

  • Form
  • Table

Properties

  • Label: The label of the component or element.
  • Basic
    • Date Spacing: Sets the spacing between the date and time boxes.
    • Hour/Minute Spacing: Sets the spacing between the hour and minute.
    • AM/PM Spacing: Sets the spacing between minute and AM/PM boxes.
  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.
    • Input (Input Text): This component’s input styles are defined by variants in the Input Text component.
    • Select (Select): This component’s select styles are defined by variants in the Select component.

Deck [[]]

Properties

  • Label: The label of the component or element.

  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.

    • Title (Text): This component’s text styles are defined by variants in the text component.
    • Filter Set (Filter Set): This component’s filter set styles are defined by variants in the filter set component.
    • Mass Actions (Button Group): This component’s Mass Actions styles are defined by variants in the Button Group component.
    • Global Actions (Button Group): This component’s Global Actions styles are defined by variants in the Button Group component.
    • Page Size (Select): This component’s Page Size styles are defined by variants in the Select component.
    • Page Indices (Button Indices): This component’s Page Indices styles are defined by variants in the Button Indices component.
  • Card

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

    • Background: Sets the background color of the cards.

    • Shadow: Places a shadow effect on the element to which it is applied.

    • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.

      • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

        • Size: The thickness of the border. Size values are based on available border size variables.
        • Style: Changes border from the default solid style to dashed or dotted.
      • Background: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

      • Shadow: Places a shadow effect on the element to which it is applied.

  • Header

    • Horizontal Spacing: Sets the spacing between the mass action buttons and search.
    • Vertical Spacing: Sets spacing between the title of the component and the mass action buttons.
    • More Actions Button Color
  • Footer:

    • Spacing Top: Sets spacing between end of the list content and the list footer.
    • Load More Horizontal Spacing
    • Right Side Horizontal Spacing
    • Text Color

Feedback Block [[]]

Note

Feedback Block variants will be usable in the File Upload component.

Properties

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Color: Sets the color of the body text within the Feedback Block.

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

    • Icon Color

  • Content:

    • Margin: Sets the margin around the feedback text
  • Title:

    • Color: Sets the color of the feedback block title.
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
    • Line Height: Specifies how much space is between each line.
  • Description:

    • Line Height: Specifies how much space is between each line.

File Upload [[]]

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.

    • As a button and icon
    • As a button and no icon
    • Image preview
    • Drag enter state
    • Drag over state
  • Label: The label of the component or element.

  • Basic

    • Message Font Size: Sets the font size for the message when in a drag state.
    • Message Text Color: Sets the text color for the message when in a drag state.
    • Item Spacing: Sets the spacing around the file item.
  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.

    • Delete Button (Button): This component’s delete button styles are defined by variants in the Button component.
    • Uploader (Button): This component’s uploader button styles are defined by variants in the Button component.
    • Image Buttons (Button): This component’s image button styles are defined by variants in the Button component.
    • Error (Feedback Block): This component’s error styles are defined by variants in the Feedback Block component.
  • Image Uploader

    • Min Height
  • Image Uploader Buttons

    • Spacing Top
    • Spacing Left
    • Spacing Between
  • Dropzone: Sets the styles for when a user drags a file over the drag and drop area.

    • Text Color

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Drag Over Border

Filter Set [[]]

Note

Filter Set variants will be usable in these components:

  • Deck
  • List
  • Table

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.

    • Horizontal filters
    • Vertical filters
  • Label: The label of the component or element.

  • Basic

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Separator Border: The line separating the filters from the footer.

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

    • Filter Spacing: Sets the spacing between each filter.

  • Accordion Header

    • Color
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
  • Accordion Footer

    • Color
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
    • Margin Top
  • Search

    • Min Width: Sets the minimum width the at which the search bar will render.

Form [[]]

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.
    • Edit
    • Read
    • Read Only
  • Label: The label of the component or element.
  • Basic
    • Save Cancel Vertical Spacing: Sets the spacing between the Save/Cancel button group and the form.
  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.
    • Section Header (Header): This component’s header styles are defined by variants in the Header component.
    • Autocomplete (Autocomplete): This component’s autocomplete styles are defined by variants in the Autocomplete component.
    • Datetime (Datetime): This component’s datetime styles are defined by variants in the Datetime component.
    • Button Group (Button Group): This component’s button group styles are defined by variants in the Button Group component.
    • Checkbox List (Checkbox List): This component’s checkbox list styles are defined by variants in the Checkbox List component.
    • Checkbox (Checkbox): This component’s checkbox styles are defined by variants in the Checkbox component.
    • Input Text (Input Text): This component’s input text styles are defined by variants in the Input Text component.
    • Text Area (Input Text Area): This component’s textarea styles are defined by variants in the Input Text Area component.
    • Label (Label Input): This component’s label styles are defined by variants in the Label Input component.
    • Radio List (Radio List): This component’s radio list styles are defined by variants in the Radio List component.
    • Select (Select): This component’s select styles are defined by variants in the Select component.
    • Slider (Slider): This component’s slider styles are defined by variants in the Slider component.
    • Switch (Switch): This component’s switch styles are defined by variants in the switch component.
    • Value Stepper (Value Stepper): This component’s value stepper styles are defined by variants in the Value Stepper component.
  • Read Mode
    • Text Color
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
  • Change Mode Icon
    • Icon Color: Change the color of the edit icon in Read Mode.
    • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.
      • Icon Color: Change the color of the edit icon in Read Mode while in hover state.
  • Description
    • Text Color
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
    • Spacing: Increases or decreases the spacing between the description and the input below.
  • Inline Error Message
    • Error Text Color
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Spacing
  • Label
    • Text Color
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
    • Line Height: Specifies how much space is between each line.
    • Vertical Spacing: Sets the vertical spacing between labels and the other content.
    • Necessity Addendum
      • Text Color
    • Disabled State: The appearance of a component element when a user cannot interact with it.
      • Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.
    • Warning
      • Color
  • Row
    • Vertical Spacing: Sets the vertical spacing between each row.
    • Horizontal Spacing: Sets the horizontal spacing between each field on the same row.
  • Section
    • Vertical Spacing: Sets the vertical spacing between the last row of a section and a new header.

Geochart [[]]

Properties

  • Label: The label of the component or element.
  • Min Color: The color that represents the start of the geochart color gradient, or the lowest data value.
  • Max Color: The color that represents the end of the geochart color gradient, or the highest data value.
  • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

Image [[]]

Properties

  • Label: The label of the component or element.

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

  • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

Input Text [[]]

The Input Text element creates single-line text fields.

Note

Input Text variants will be usable in these components:

  • Autocomplete
  • Datetime
  • Form
  • Table
  • Value Stepper

Properties

  • Label: The label of the component or element.

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Text Color

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

    • Height: Sets the height of the input area.

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

    • Min Width: Sets the minimum width for the input text field.

  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.

    • Datepicker (Datepicker): This component’s datepicker styles are defined by variants in the Datepicker component.
  • Icon

    • Color
  • Focus State: The appearance of a component element when it’s selected and ready for user interaction/input. Focus state is also used when a user employs the keyboard to “tab” through elements on a page.

    • Border Color
  • Focus With Keyboard

    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.
  • Disabled State: The appearance of a component element when a user cannot interact with it.

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
    • Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.
    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.
  • Warning

    • Border Color:
  • Character Count: Allows the user to see the input field character limit, as well how many they’ve typed.

    • Color

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

    • Margin Top

    • Warning

      • Color
  • Placeholder

    • Color

Input Text Area [[]]

Note

Input Text Area variants will be usable in these components:

  • Form
  • Table

Properties

  • Label: The label of the component or element.

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Color

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

    • Min Height

  • Focus State: The appearance of a component element when it’s selected and ready for user interaction/input. Focus state is also used when a user employs the keyboard to “tab” through elements on a page.

    • Border Color
  • Focus With Keyboard

    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.
  • Disabled State: The appearance of a component element when a user cannot interact with it.

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.
    • Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.
  • Warning

    • Border Color
  • Character Count: Allows the user to see the input field character limit, as well how many they’ve typed.

    • Color
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Margin Top
    • Warning
      • Color:
  • Placeholder: Sets the styling for the placeholder text.

    • Color

List [[]]

Properties

  • Label: The label of the component or element.

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Column Spacing: Increases or decreases the spacing between columns.

    • Row Actions Spacing: Increases or decreases spacing to the left of the row actions.

    • Checkbox Spacing: Increases or decreases spacing to the right of the checkbox.

    • Item Spacing: Increases or decreases the spacing between the label and the item.

  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.

    • Row Actions (Button Group): This component’s row action styles are defined by variants in the Button Group component.
    • Mass Actions (Button Group): This component’s mass actions styles are defined by variants in the Button Group component.
    • Global Actions (Button Group): This component’s global action styles are defined by variants in the Button Group component.
    • UI Blocker (UI Blocker): This component’s UI blocker styles are defined by variants in the UI Blocker component.
    • Title (Text): This component’s title styles are defined by variants in the Text component.
    • Filter Set (Filter Set): This component’s filter set styles are defined by variants in the Filter Set component.
    • Page Size (Select): This component’s Page Size styles are defined by variants in the Select component.
    • Page Indices (Button Indices): This component’s page indices styles are defined by variants in the Button Indices component.
  • Row

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.
    • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.
      • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
  • Primary Style

    • Text Color
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
  • Secondary Style

    • Text Color
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
  • Tertiary Style:

    • Text Color
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
  • Header

    • Horizontal Spacing: Sets the spacing between the mass action buttons and search.
    • Vertical Spacing: Sets spacing between the title of the component and the mass action buttons.
    • More Actions Button Color
  • Footer:

    • Spacing Top: Sets spacing between end of the list content and the list footer.
    • Load More Horizontal Spacing
    • Right Side Horizontal Spacing
    • Text Color

Masthead [[]]

Properties

  • Label: The label of the component or element.

  • Height: Sets the height of the Masthead container.

  • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

  • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

  • Padding: The space around the content of an element. Padding values are based on available spacing variables.

  • Align Items: Determines how to align items using Responsive Grid divisions in the masthead. This property has five different values:

    • Flex start: All Masthead items are aligned to the start of the grid.
    • Flex end: All Masthead items are aligned at the end of the grid.
    • Center: items are justified in the center of the grid.
    • Baseline: All Masthead items are aligned by their content’s baseline
    • Stretch (default): Stretches the Masthead’s content to fit the grid’s full width.
  • Justify Content: Sets the spacing between the components placed in the Masthead.

  • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

    • Size: The thickness of the border. Size values are based on available border size variables.
    • Style: Changes border from the default solid style to dashed or dotted.

Page [[]]

Properties

  • Label: The label of the component or element.
    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
    • Font Family: Specifies which particular font face is used when rendering text. Font family values are based on available typography variables.
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Padding: The space around the content of an element. Padding values are based on available spacing variables.
  • Links
    • Color
    • Text Decoration: Specifies whether the text should be underlined or strikethrough.
    • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.
      • Color
      • Text Decoration: Specifies whether the text should be underlined or strikethrough.
  • Progress Bar: The bar that appears at the top of the page when the page is loading.
    • Color

Radio List [[]]

The Radio List element is a group of circles that are filled or highlighted when selected. Similar to the Checkbox List element, Radio List gives the ability to select single values for submission.

Note

Radio List variants will be usable in the Form component.

  • Basic

    • Item Spacing

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Size: Size of the radio list.

  • Label

    • Text Color
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
    • Padding: The space around the content of an element. Padding values are based on available spacing variables.
  • Active State: The appearance of a component element in the time between the click and release of a user.

    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.
  • Focus State: The appearance of a component element when it’s selected and ready for user interaction/input. Focus state is also used when a user employs the keyboard to “tab” through elements on a page.

    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.
  • Focus State: The appearance of a component element when it’s selected and ready for user interaction/input. Focus state is also used when a user employs the keyboard to “tab” through elements on a page.

    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
  • Selected State: The appearance of a component element when it has been selected or highlighted and remains on the page.

    • Inner Color: The color that appears in the center of the button when it is selected.
    • Outer Color: The color that appears around the edge of the button when it is selected.
    • Outer Width: The width of the color that appears around the edge of the button when it is selected.
  • Disabled State: The appearance of a component element when a user cannot interact with it.

    • Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.

Select [[]]

The Select component is a control that, when clicked, provides any number of options in a dropdown.

Note

Select variants will be usable in these components:

  • Datetime
  • Form
  • List
  • Table

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.

    • Default
    • Disabled
    • Multiselect
  • Label: The label of the component or element.

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Color

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

    • Text Indent: Sets the indentation of the text within the select component.

    • Height: Sets the height of the Select component container.

    • Min Width: The select component will be rendered to at least this width.

    • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.

      • Menu (Menu): The select component’s option menu styles are defined by variants in the Menu component.
      • Checkbox List (Checkbox List): This component’s page checkbox styles are defined by variants in the Checkbox List component.
    • Focus State: The appearance of a component element when it’s selected and ready for user interaction/input. Focus state is also used when a user employs the keyboard to “tab” through elements on a page.

      • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

        • Size: The thickness of the border. Size values are based on available border size variables.
        • Style: Changes border from the default solid style to dashed or dotted.
      • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.

      • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

        • Size: The thickness of the border. Size values are based on available border size variables.
        • Style: Changes border from the default solid style to dashed or dotted.
      • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Active State: The appearance of a component element in the time between the click and release of a user.

      • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

        • Size: The thickness of the border. Size values are based on available border size variables.
        • Style: Changes border from the default solid style to dashed or dotted.
      • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Caret

      • Color
      • Right Spacing
    • Disabled State: The appearance of a component element when a user cannot interact with it.

      • Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.

Slider [[]]

The Slider component allows a user select either a single numeric value or a range value which must be no less than a given value, and no more than another given value.

Note

Slider variants will be usable in these components:

  • Form
  • Table

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.

    • As single value
    • As a range
  • Label: The label of the component or element.

  • Basic

    • Container Height: Sets the height of the space around the slider bar.
    • Label Color: Sets the color of label text displaying the value range of the slider.
    • Label Font Size
  • Track:

    • Track Height: Sets the height of the bar surrounding the thumb.
    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.
    • Selected State: The appearance of a component element when it has been selected or highlighted and remains on the page.
      • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
  • Thumb:

    • Thumb Color: Sets the color of the sliding thumb.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Size: Sets the size of the thumb element.

    • Focus State: The appearance of a component element when it’s selected and ready for user interaction/input. Focus state is also used when a user employs the keyboard to “tab” through elements on a page.

      • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

Sliding Panel [[]]

The Sliding Panel component is a popup window that renders only when triggered, typically, by an associated button.

Properties

  • Label: The label of the component or element.
  • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
  • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.
  • Padding: The space around the content of an element. Padding values are based on available spacing variables.

Switch [[]]

The Switch component is a button used to toggle states. They are typically used in mobile applications to toggle app settings on and off.

Note

Switch variants will be usable in these components:

  • Form
  • Table

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.

    • Default
    • No On/Off Text
  • Label: The label of the component or element.

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Width: Set the width of the switch.

  • Nub

    • Fill Color: Sets the color of the nub that represents on and off state.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.
    • Shadow: Places a shadow effect on the element to which it is applied.
    • Size: Sets the size of the nub.
  • Text

    • Color
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Spacing: Determines how much space is between elementgs using variables set within the Spacing variable category. All spacing values are all relative to the spacing options set within the spacing variable
  • Activated

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
    • Border Color: Sets the color of the switch border when in an activated state.
  • Disabled State: The appearance of a component element when a user cannot interact with it.

    • Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.

Table [[]]

Properties

  • Label: The label of the component or element.

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Color

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Row Height

  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.

    • Row Actions (Button Group): This component’s row action styles are defined by variants in the Button Group component.
    • Mass Actions (Button Group): This component’s mass actions styles are defined by variants in the Button Group component.
    • Global Actions (Button Group): This component’s global action styles are defined by variants in the Button Group component.
    • Mass Action Checkboxes (Checkbox): This component’s mass action checkbox styles are defined by variants in the Checkbox component.
    • Checkbox (Checkbox): This component’s checkbox styles are defined by variants in the Checkbox component.
    • Autocomplete (Autocomplete): This component’s autocomplete styles are defined by variants in the autocomplete component.
    • Datetime (Datetime): This component’s datetime styles are defined by variants in the Datetime component.
    • Input Text (Input Text): This component’s input text styles are defined by variants in the Input Text component.
    • Text Area (Input Text Area): This component’s text area styles are defined by variants in the Input Text area component.
    • Label (Label Input): This component’s Label styles are defined by variants in the Label Input component.
    • Page Size (Select): This component’s Page Size styles are defined by variants in the Select component.
    • Slider (Slider): This component’s slider styles are defined by variants in the Slider component.
    • Switch (Switch): This component’s switch styles are defined by variants in the Switch component.
    • Value Stepper (Value Stepper): This component’s value stepper styles are defined by variants in the Value Stepper component.
    • Title (Text): This component’s text styles are defined by variants in the Text component.
    • Filter Set (Filter Set): This component’s filter set styles are defined by variants in the Filter Set component.
    • Page Indices (Button Indices): This component’s page Indices styles are defined by variants in the Button Indices component.
  • Header Cells

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
    • Color: Sets the color of the text in the specified element. Color values are based on available brand color or functional color variables.
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
    • Text Transform: Specifies whether the text should be upper or lower case.
  • Drawer

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.
    • Icon Color
  • Summary

    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
  • Row

    • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.
      • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
      • Border Color
    • Selected State: The appearance of a component element when it has been selected or highlighted and remains on the page.
      • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
      • Border Color
    • Deleted
      • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
      • Border Color
  • Row Numbers

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
    • Min Width: Sets the row number cell so that it will render no lower than the chosen amount of pixels.
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
  • Edit Icon

    • Icon Color
  • Drag And Drop State

    • Border Size
    • Dragging Shadow
    • Droppable Area Color
  • Header

    • Horizontal Spacing: Sets the spacing between the mass action buttons and search.
    • Vertical Spacing: Sets spacing between the title of the component and the mass action buttons.
    • More Actions Button Color
  • Footer:

    • Spacing Top: Sets spacing between end of the list content and the list footer.
    • Load More Horizontal Spacing
    • Right Side Horizontal Spacing
    • Text Color

Tab Container [[]]

Properties

  • Label: The label of the component or element.

  • Tab Container

    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
  • Tab

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Color: Sets the color of the tab label text.

    • Label Font Size: Sets the font size of the text within the tab.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

    • Icon Spacing: Sets the spacing between the tab label and the accompanying icon.

    • Selected State: The appearance of a component element when it has been selected or highlighted and remains on the page.

      • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
      • Color
      • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
  • Accordion: When there is not enough horizontal space to display every tab, they are stacked vertically in accordion-like sections.This controls the spacing between each section.

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.
  • Content:

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

Tab Set [[]]

Properties

  • Label: The label of the component or element.

  • Tab Container

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
  • Tab

    • Label Font Size: Sets the size of the text.

    • Color: Sets the color of the label text.

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

      • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

        • Size: The thickness of the border. Size values are based on available border size variables.
        • Style: Changes border from the default solid style to dashed or dotted.
      • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

    • Icon Spacing

    • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.

      • Color: Sets the color of the label text.

      • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

        • Size: The thickness of the border. Size values are based on available border size variables.
        • Style: Changes border from the default solid style to dashed or dotted.
    • Selected State: The appearance of a component element when it has been selected or highlighted and remains on the page.

      • Color: Sets the color of the label text.

      • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

      • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.

      • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

        • Size: The thickness of the border. Size values are based on available border size variables.
        • Style: Changes border from the default solid style to dashed or dotted.
      • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.

        • Color: Sets the color of the label text.
  • Content:

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

Text [[]]

Note

Text variants will be usable in these components:

  • Deck
  • Header

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.
    • Default
    • Bold
    • Link
    • Unordered List
    • Ordered List
  • Label: The label of the component or element.
  • Basic
    • Color
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Line Height: Specifies how much space is between each line.
    • Font Family: Specifies which particular font face is used when rendering text. Font family values are based on available typography variables.
    • Text Decoration: Specifies whether the text should be underlined or strikethrough.
  • Bolded
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
  • List
    • Line Height: Specifies how much space is between each line.

Toast [[]]

The Toast component is an option for providing feedback to users. It’s particularly useful for notifications and keeping users up to date with asynchronous processes happening in the background. Toasts can be created through the Show Message action.

Properties

  • Label: The label of the component or element.

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

    • Color: Sets the color of the text in the toast.

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.

    • Line Height: Specifies how much space is between each line.

    • Max Width

    • Min Width

    • Spacing From Page

    • Message Padding

    • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.

      • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

      • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

        • Size: The thickness of the border. Size values are based on available border size variables.
        • Style: Changes border from the default solid style to dashed or dotted.
      • Box Shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

      • Color: Sets the color of the text in the toast.

Tooltip [[]]

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.

    • Default
    • Compact
  • Label: The label of the component or element.

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

    • Text Color

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.

    • Line Height: Specifies how much space is between each line.

    • Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

    • Max Width

  • Compact

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Line Height: Specifies how much space is between each line.
    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

UI Blocker [[]]

Note

UI Blocker variants will be usable in the List component and in the Show message and block UI action.

Properties

  • Label: The label of the component or element.
  • Basic
    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
    • Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.
    • Text Padding
  • Text
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
  • Subtext
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
  • Placeholder
    • Color: Sets the color of the placeholder text.

Value Stepper [[]]

The Value Stepper component is used to let the user enter a number by clicking buttons that increase or decrease the value.

Note

Value Stepper variants will be usable in these components:

  • Form
  • Table

Properties

  • Label: The label of the component or element.
  • Basic
    • Button Spacing: Sets the spacing between the buttons and the value input.
  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.
    • Button (Button): This component’s button styles are defined by variants in the Button component.
    • Input (Input Text): This component’s input styles are defined by variants in the Input Text component.

Vertical Navigation [[]]

Properties

  • Label: The label of the component or element.

  • Basic

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

  • Navigation Item

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.

    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.

    • Text Color: Sets the color of the text in the specified element. Color values are based on available brand color or functional color variables.

    • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.

      • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

      • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

        • Size: The thickness of the border. Size values are based on available border size variables.
        • Style: Changes border from the default solid style to dashed or dotted.
      • Text Color: Sets the color of the text in the specified element. Color values are based on available brand color or functional color variables.

    • Selected State: The appearance of a component element when it has been selected or highlighted and remains on the page.

      • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

      • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

        • Size: The thickness of the border. Size values are based on available border size variables.
        • Style: Changes border from the default solid style to dashed or dotted.
      • Text Color: Sets the color of the text in the specified element. Color values are based on available brand color or functional color variables.

    • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.

      • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

      • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

        • Size: The thickness of the border. Size values are based on available border size variables.
        • Style: Changes border from the default solid style to dashed or dotted.
      • Text Color: Sets the color of the text in the specified element. Color values are based on available brand color or functional color variables.

  • Top Level Navigation Item

    • Padding: The space around the content of an element. Padding values are based on available spacing variables.
    • Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.

Wizard [[]]

Properties

  • Preview With…: Preview the component with common configurations available within the App Composer.
    • Horizontal
    • Vertical
  • Label: The label of the component or element.
  • Nested Components: The child components that comprise the parent component. Nested components often use style variants, created and defined apart from the parent, within the child component’s own tab. This component’s child components are listed in the parenthesis.
    • Step Buttons (Button): This component’s step buttons are defined by variants in the Button Component.
  • Step Labels: The labels that serve as the descriptive title for each step.
    • Color
    • Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
    • Padding: The space around the content of an element. Padding values are based on available spacing variables.
  • Step Connectors: The lines between the title and the next step number.
    • Spacing: Determines how much space is between elementgs using variables set within the Spacing variable category. All spacing values are all relative to the spacing options set within the spacing variable
    • Line Color
    • Line Thickness
    • Vertical Connector Width
  • Content
    • Padding: The space around the content of an element. Padding values are based on available spacing variables.
  • Navigation Buttons
    • Spacing: Determines how much space is between elementgs using variables set within the Spacing variable category. All spacing values are all relative to the spacing options set within the spacing variable

Wrapper [[]]

Properties

  • Label: The label of the component or element.

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Padding: The space around the content of an element. Padding values are based on available spacing variables.

    • Shadow: Places a shadow effect on the element to which it is applied.

    • Border Radius: Rounds the corners of an element if a border is applied. Border radius values are based on available border variables.

  • Hover State: The appearance of a component element when a user puts their cursor on on an element, but doesn’t click.

    • Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

    • Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

      • Size: The thickness of the border. Size values are based on available border size variables.
      • Style: Changes border from the default solid style to dashed or dotted.
    • Shadow: Places a shadow effect on the element to which it is applied.