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 DSS lists each of the drag-and-drop components found in the App Composer, as well as the child components that make up those drag-and-drop elements.

Parent 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.
  - Color: The color of the border. Color values are based on available color variables.
- 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.

Button Set [[]]¶

Properties¶

Label: The label of the component or element.
Button Group Horizontal Spacing: Sets the horizontal spacing between the buttons in the button groups.
Button Group Vertical Spacing: Sets the vertical 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.

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 (Pagination): This component’s Page Indices styles are defined by variants in the Pagination 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.
  - Color: The color of the border. Color values are based on available color variables.
- 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 an end 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.
    
    Color: The color of the border. Color values are based on available color variables.
  - 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

File Upload [[]]¶

Properties¶

Preview With…: Preview the component with common configurations available within the App Composer.
- A button and icon
- 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.
- Color: The text color when the user drags a file over the drag-and-drop area.
- 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.
  - Color: The color of the border. Color values are based on available color variables.
- 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.
  - Color: The color of the border. Color values are based on available color variables.
- 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.
Label
- 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.
Header
- Color
Footer
- Color
- Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
- Margin Top

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 an end 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 an end 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
- Header Spacing: Sets the spacing between the form header and the form fields.
- 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.

Header [[]]¶

Note

Header variants are usable in the Form 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.
- Button Set (Button Set): This component’s header styles are defined by variants in the Button Set component.
Title
- Title Text Color
- Font Size: Changes the text size within the specified element. Font size 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.
- 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.
- Margin
- Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.
- Text Decoration: Specifies whether the text should be underlined or strikethrough.
Subtitle
- Subtitle Text Color
- Font Size: Changes the text size within the specified element. Font size 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.
- 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.
- Margin
- Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.
- Text Decoration: Specifies whether the text should be underlined or strikethrough.
Separator: The line separating the header from the rest of the page.
- Size
- Border Style
- Border Color
- Bottom Spacing: Sets the spacing between the top of the line to the bottom of the title.
Sub Header
- Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.
- Margin

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.
  - Color: The color of the border. Color values are based on available color variables.
- 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 an end 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.
  - Color: The color of the border. Color values are based on available 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.
- Background

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.
- 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.
- Color
- Column Margin Right
- Row Actions Padding Left
- Checkbox Margin Right
- Head Padding
- Mass Actions Margin Left
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 (Pagination): This component’s page indices styles are defined by variants in the Pagination component.
Row
- 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.
  - Color: The color of the border. Color values are based on available color variables.
- Last Item Border Bottom: The border styles on the border line that comes after the last item in a list.
  - 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.
  - Color: The color of the border. Color values are based on available color variables.
- 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.
- Margin
- 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 an end 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.
    
    Color: The color of the border. Color values are based on available 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.
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
Sub Item Primary
- Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
Sub Item Secondary
- 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: All Masthead 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.
- Color: The color of the border. Color values are based on available color variables.

Navigation [[]]¶

Properties¶

Label: The label of the component or element.
Basic
- 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.
- 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.
  - Color: The color of the border. Color values are based on available color variables.
- Menu Spacing: Sets the spacing between the navigation item and its dropdown menu.
- Icon Spacing
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.
- Borderless (Button): This component’s row action styles are defined by variants in the Button component.
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
Hover State: The appearance of a component element when an end 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.
- 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 an end 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.

Search [[]]¶

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.
- Autocomplete (Autocomplete): This component’s page Autocomplete styles are defined by variants in the Autocomplete component.

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.
  - Color: The color of the border. Color values are based on available color variables.
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.
  - Color: The color of the border. Color values are based on available color variables.
- 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.
  - Color: The color of the border. Color values are based on available color variables.
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.
    
    Color: The color of the border. Color values are based on available color 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.
- Icon Spacing
- Hover State: The appearance of a component element when an end 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.
    
    Color: The color of the border. Color values are based on available color variables.
- 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.
    
    Color: The color of the border. Color values are based on available color variables.
  - Hover State: The appearance of a component element when an end 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.

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: Selects the color for the column header text.
- 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.
  - Color: The color of the border. Color values are based on available color variables.
- Row Height
- Font Family: Specifies which particular font face is used when rendering text. Font family values are based on available typography variables.
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 (Pagination): This component’s page Indices styles are defined by variants in the Pagination component.
Header Row
- 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.
Row
- Font Color
- Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
- Even Row Font Color (Optional)
- Even Row Background Color (Optional)
- Between Rows Border
  - 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.
  - Color: The color of the border. Color values are based on available color variables.
- Between Cells Border
  - 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.
  - Color: The color of the border. Color values are based on available color variables.
- Hover State: The appearance of a component element when an end 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
Cell
- Hover State: The appearance of a component element when an end 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.
    
    Color: The color of the border. Color values are based on available 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.
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.
Drawer
- Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
- Padding: The space around the content of an element. Padding values are based on available spacing variables.
- Icon Color
Footer Row
- 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.
- Text Transform: Specifies whether the text should be upper or lower case.
Edit Icon
- Icon Color
Drag-and-drop State
- Border Size
- Dragging Shadow: The shadow on the item being dragged.
- Droppable Area Color: The color of the area where the item can be dropped.
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: Sets the color of the more icon.
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: Changes the text color of the “Viewing…” text in the footer.
Droppable
- Color
- Follower Shadow
Summary
- Font Weight: Specifies the boldness of the font. Font weight values are based on available typography 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.

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.
  - Color: The color of the border. Color values are based on available color variables.
- 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.
  - Color: The color of the border. Color values are based on available color variables.
- 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 an end 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.
    
    Color: The color of the border. Color values are based on available color 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.
- 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.
    
    Color: The color of the border. Color values are based on available color 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 an end 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.
      
      Color: The color of the border. Color values are based on available color 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.
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 elements 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 elements 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.
  - Color: The color of the border. Color values are based on available color variables.
- 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 an end 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.
  - Color: The color of the border. Color values are based on available color variables.
- Shadow: Places a shadow effect on the element to which it is applied.

Child Components¶

Autocomplete [[]]¶

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

Note

Autocomplete variants will be usable in these components:

Search
Form
Table

Properties¶

Label: The label of the component or element.

Basic

Min Width

Max 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.

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.

Color: The color of the border. Color values are based on available color variables.

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.
- Color: The color of the border. Color values are based on available color variables.
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:

File Upload
Navigation
Wizard
Button Group
Datepicker
Pagination
Value Stepper

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.
  - Color: The color of the border. Color values are based on available color variables.
- 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 an end 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.
  - Color: The color of the border. Color values are based on available 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.
- Color: Sets the color of the text within the button.
Hover State: The appearance of a component element when an end 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.
  - Color: The color of the border. Color values are based on available 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.
- Color: Sets the color of the text within the button.
Active State: The appearance of a component element in the time between the click and release of an end 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.
  - Color: The color of the border. Color values are based on available 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.
- Color: Sets the color of the text within the button.
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.
  - Color: The color of the border. Color values are based on available 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.
- Color: Sets the color of the text within the button.
Disabled State: The appearance of a component element when an end 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.
  - Color: The color of the border. Color values are based on available 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.
- Color: Sets the color of the text within the button.
- 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 elements using variables set within the Spacing variable category. All spacing values are all relative to the spacing options set within the spacing variable

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:

Form
Table
Checkbox List
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.
  - Color: The color of the border. Color values are based on available color variables.
- 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
- 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.
- 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 an end 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.
  - Color: The color of the border. Color values are based on available 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.
Focus State: The appearance of a component element when it’s selected and ready for user interaction/input. Focus state is also used when an end 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.
  - Color: The color of the border. Color values are based on available 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.
Active State: The appearance of a component element in the time between the click and release of an end 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.
  - Color: The color of the border. Color values are based on available 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.
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.
  - Color: The color of the border. Color values are based on available color variables.
Disabled State: The appearance of a component element when an end 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
Selected State: The appearance of a component element when it has been selected or highlighted and remains on the page.
- Outer Color
- Outer Width
- Inner 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.
Indented Item
- Margin

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.
- Select Spacing
- Spacing Between Rows: Sets the space between each calendar row.
- Bottom Butting Spacing
- Color
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.
- Today Button (Button): This component’s today button styles are defined by variants in the Button component.
- Day (Button): This component’s day 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 an end user cannot interact with it.
- Opacity: Sets the transparency level of unavailable dates on the datepicker.
Day
- Diabled Opacity

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.

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.
  - Color: The color of the border. Color values are based on available 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: 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.

Input Text [[]]¶

The Input Text element creates single-line text fields.

Note

Input Text variants will be usable in these components:

Form
Table
Autocomplete
Datetime
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.
  - Color: The color of the border. Color values are based on available color variables.
- 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 input text.
- Font Size: Changes the text size within the specified element. Font size 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.
- Padding: The space around the content of an element. Padding values are based on available spacing variables.
- Height: Sets the height of the input area.
- 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 an end 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 an end 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: Sets the color of the character count text.
- Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
- Margin Top
- Warning
  - Color: Sets the color of the character count text when character count exceeds, or comes close to, the field character limit.
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.
  - Color: The color of the border. Color values are based on available color variables.
- 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 an end 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 an end 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

Menu [[]]¶

The Menu component is a collection of commands that can be performed or activated by a user.

Note

Menu variants will be usable in these components:

Autocomplete
Select

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.
  - Color: The color of the border. Color values are based on available color variables.
- 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.
- Padding: The space around the content of an element. Padding values are based on available spacing variables.
- Margin Top: Sets the spacing between the menu and whatever is above.
- Color
Menu Item
- Text Color
- 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.
- Font Weight: Specifies the boldness of the font. Font weight values are based on available typography variables.
- Min Width: All menu options will be rendered to at least this width.
- Padding: The space around the content of an element. Padding values are based on available spacing variables.
- Text Decoration: Specifies whether the text should be underlined or strikethrough.
- Icon
  - Spacing: Determines how much space is between elements using variables set within the Spacing variable category. All spacing values are all relative to the spacing options set within the spacing variable
- Secondary
  - 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.
- Hover State: The appearance of a component element when an end 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.:
  - Color
  - Text Decoration: Specifies whether the text should be underlined or strikethrough.
Menu Items Header
- Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
- Text Color
- 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.
- 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.
- Text Transform: Specifies whether the text should be upper or lower case.
- Icon
  - Spacing: Determines how much space is between elements using variables set within the Spacing variable category. All spacing values are all relative to the spacing options set within the spacing variable
Focus State: The appearance of a component element when it’s selected and ready for user interaction/input. Focus state is also used when an end 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.
Options
- Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
- Min Width
- Icon
  - Spacing: Determines how much space is between elements using variables set within the Spacing variable category. All spacing values are all relative to the spacing options set within the spacing variable
- Secondary
  - Font Size: Changes the text size within the specified element. Font size values are based on available typography variables.
- Hover State
  - Color
  - Background Color
Option Group Label
- Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

Modal [[]]¶

Modals are triggered using the actions framework. Modal style variants created within the DSS can be selected and apllied when configuring a modal in the app composer.

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.
- Width: Sets the size of the modal horizontally.
- Height: Sets the height of the modal vertically.
- Bottom Spacing (without buttons): Sets padding at the bottom when no buttons are included. All padding values are all relative to the spacing options you set within the Spacing variable.
- 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.
  - Color: The color of the border. Color values are based on available color variables.
- 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.
- Close Icon Color: Sets the color of the icon used to close the modal.
Header
- Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
- Padding: The space around the content of an element. Padding values are based on available spacing variables.
- Separator: The line separating the title from the Body. This element uses variables from the Borders category for its styles.
  - Size
  - Style
  - Color
Content
- Padding: The space around the content of an element. Padding values are based on available spacing variables.
Footer
- Background Color: Sets the background color of the element. Background color values are based on available brand color or functional color variables.
- Padding: The space around the content of an element. Padding values are based on available spacing variables.
- Separator: The line separating body content from the footer. This element uses variables from the Borders category for its styles.
  - Size
  - Style
  - Color
Backdrop
- Color
- Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.

Page [[]]¶

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.
- 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.
- Link Color
Links
- Color
- Text Decoration: Specifies whether the text should be underlined or strikethrough.
- Hover State: The appearance of a component element when an end 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

Pagination [[]]¶

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

Note

Pagination variants will be usable in these components:

Deck
List
Table

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.

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.

Properties¶

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.
  - Color: The color of the border. Color values are based on available color variables.
- 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 an end 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 an end 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.
Hover State: The appearance of a component element when an end user puts their cursor on on an element, but doesn’t click.
- 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.
  - Color: The color of the border. Color values are based on available color variables.
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 an end 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:

Deck
Form
List
Table
Datetime

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.
  - Color: The color of the border. Color values are based on available 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.
- 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 an end 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.
    
    Color: The color of the border. Color values are based on available 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.
- Hover State: The appearance of a component element when an end 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.
    
    Color: The color of the border. Color values are based on available 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.
- Active State: The appearance of a component element in the time between the click and release of an end 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.
    
    Color: The color of the border. Color values are based on available 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.
- Caret
  - Color
  - Right Spacing
- Disabled State: The appearance of a component element when an end 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.
  - Color: The color of the border. Color values are based on available color variables.
- 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 an end 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.
  - Color: The color of the border. Color values are based on available color variables.
- 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 elements 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 an end user cannot interact with it.
- Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.

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.
  - Color: The color of the border. Color values are based on available color variables.
- 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 an end 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.
  - Color: The color of the border. Color values are based on available color variables.
  start-line: 0
  
  end-line: 7
- 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.

start-line:	0
end-line:	7

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.