UI Gallery
Trigger Actions and Control States
Allow users to take actions, trigger events, or control states in the interface using these components.
Includes:
A clickable element that initiates an action, with the intended behavior clearly communicated through the button’s label and/or icon. Uses
- Initiating primary actions (typically one per screen) that drive the main flow, such as submitting a form, proceeding to the next step, or signing in, etc.
- Providing alternative action (secondary) options that support or contrast the primary action, like canceling, skipping, or navigating back.
- Facilitating context-specific localized/inline interactions, found inside components.
A list of anticipated queries/topics, in logical order, related to the main content where the corresponding information is not preloaded and hidden, but retrieved only when the user clicks. Uses
- Enable curiosity by anticipating further queries about the main content or related subject matter.
- Reduce effort needed to explore related content by making it accessible inline.
- Retain brevity of the main content by assigning peripheral information to the follow-up blocks.
- Provide users quick controls with immediate effect and visual feedback.
- Indicate current state, settings or preferences clearly.
Button, FollowupBlock, SwitchGroup, ToggleGroup
Buttons
DefinitionA clickable element that initiates an action, with the intended behavior clearly communicated through the button’s label and/or icon. Uses
- Initiating primary actions (typically one per screen) that drive the main flow, such as submitting a form, proceeding to the next step, or signing in, etc.
- Providing alternative action (secondary) options that support or contrast the primary action, like canceling, skipping, or navigating back.
- Facilitating context-specific localized/inline interactions, found inside components.
Variants
Sizes
Button Groups
Anatomy
Customize with Prompts
-
Orientation of Button Groups: Tell C1 whether the button group should be horizontal or vertical.
Ex. “Stack these buttons vertically instead of side by side.”
-
Label Content: Prompt for inclusion of icons in the label and their placement (left, right or both). Prompt C1 to change or use custom text in the label.
Ex. “Add a download icon on the right right of the button and change the label to “Get Now”
-
Button Type: Customize type of button generated (primary, secondary, tertiary).
Ex. ""Change the ‘Cancel’ button to tertiary style”
Follow-up Block
DefinitionA list of anticipated queries/topics, in logical order, related to the main content where the corresponding information is not preloaded and hidden, but retrieved only when the user clicks. Uses
- Enable curiosity by anticipating further queries about the main content or related subject matter.
- Reduce effort needed to explore related content by making it accessible inline.
- Retain brevity of the main content by assigning peripheral information to the follow-up blocks.
Customize With Prompts
- Question Format and Voice: Customize how follow-up questions are phrased, such as using active or passive voice and choosing between direct questions or conversational prompts.
Ex. “Present the follow-ups as topics to be explored rather than questions”
-
Question Types: Choose whether questions should be aimed at going deeper into the main content, broaden its coverage, or branch into related areas.
Ex. “Add three questions that gradually move from basics to more advanced topics”
-
Number of Questions: Change the number of questions to be displayed in a follow-up block can be specified to C1
Ex. “Expand this to five detailed follow-ups to cover all aspects”
Switch Group
Definition A switch group is a collection of toggle switches that allows users to control multiple related boolean (on/off) settings. Uses- Provide users quick controls with immediate effect and visual feedback.
- Indicate current state, settings or preferences clearly.
Variants
Anatomy
Prompt-Based UI Controls
-
Default State: Mention whether a switch in a group should be turned on or off by default.
Ex. “Set all switches in the ‘Notifications’ group to ON by default.”
-
Grouping and Categorization: Tell C1 if the switches should be further grouped into categories.
Ex. “Group switches into ‘Account Settings’, ‘Notifications’, and ‘Privacy’ categories.”
-
Switch Label: Provide or change the labels for each switch in a group by prompting C1.
Ex. “Rename the switches in the ‘Notifications’ group to ‘Email Alerts’, ‘SMS Alerts’, and ‘Push Notifications’.”
-
Number of Switches: Customize the number of switches that should be generated in a group or particular sub-group.
Ex. “Add 2 more switches to the ‘Accessibility’ group.”