> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thesys.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Trigger Actions and Control States

> Allow users to take actions, trigger events, or control states in the interface using these components.

**Includes:** `Button`, `FollowupBlock`, `SwitchGroup`, `ToggleGroup`

## Buttons

**Definition**\
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.

### Variants

<img className="block w-full dark:hidden select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/buttons-variants_light.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=1eb022d001bcb0491c19b7b868f25e6f" alt="Light Mode Image" width="1080" height="162" data-path="library/assets/triggers-assets/buttons-variants_light.svg" />

<img className="hidden w-full dark:block select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/buttons-variants_dark.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=2773fb01e86ad8a66d193798d69bf2a6" alt="Dark Mode Image" width="1080" height="162" data-path="library/assets/triggers-assets/buttons-variants_dark.svg" />

### Sizes

<img className="block w-full dark:hidden select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/buttons-sizes_light-labelled.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=42f823298babc60ffd5f4c0f0bae8d2d" alt="Light Mode Image" width="1080" height="307" data-path="library/assets/triggers-assets/buttons-sizes_light-labelled.svg" />

<img className="hidden w-full dark:block select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/buttons-sizes_dark-labelled.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=06222cff7b448a86d030f8d64db4140e" alt="Dark Mode Image" width="1080" height="307" data-path="library/assets/triggers-assets/buttons-sizes_dark-labelled.svg" />

### Button Groups

<img className="block w-full dark:hidden select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/buttonGroup_light.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=8d11e012a70f8938475e9e624ecd9842" alt="Light Mode Image" width="1080" height="288" data-path="library/assets/triggers-assets/buttonGroup_light.svg" />

<img className="hidden w-full dark:block select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/buttonGroup_light-1.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=d0abb546f1bbeb11e0641a55a2bf0271" alt="Dark Mode Image" width="1080" height="288" data-path="library/assets/triggers-assets/buttonGroup_light-1.svg" />

### Anatomy

<img className="block w-full dark:hidden select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/button-anatomy_light-bg1.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=6ea16e953df7d39efe65f41f28cce870" alt="Light Mode Image" width="1080" height="288" data-path="library/assets/triggers-assets/button-anatomy_light-bg1.svg" />

<img className="hidden w-full dark:block select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/button-anatomy_dark-bg1.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=76683c0a20683fc2a75dd109cf6be0fb" alt="Dark Mode Image" width="1080" height="288" data-path="library/assets/triggers-assets/button-anatomy_dark-bg1.svg" />

### 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

**Definition**\
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.

<img className="block w-full dark:hidden select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/followUp_light.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=037b92833e1927c5b7c3eb4df91a7fee" alt="Light Mode Image" width="1080" height="268" data-path="library/assets/triggers-assets/followUp_light.svg" />

<img className="hidden w-full dark:block select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/followUp_dark.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=9d0599d24e5530a53d61afd58e9cc5f6" alt="Dark Mode Image" width="1080" height="268" data-path="library/assets/triggers-assets/followUp_dark.svg" />

### 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

<img className="block w-full dark:hidden select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/switchGroup-variants_light.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=c170af036c5c9b3a9c6aab46e5630208" alt="Light Mode Image" width="1080" height="289" data-path="library/assets/triggers-assets/switchGroup-variants_light.svg" />

<img className="hidden w-full dark:block select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/switchGroup-variants_dark.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=d5e3a854fa7d1965cabc73be47ee336a" alt="Dark Mode Image" width="1080" height="289" data-path="library/assets/triggers-assets/switchGroup-variants_dark.svg" />

### Anatomy

<img className="block w-full dark:hidden select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/switchGroup-anatomy_light.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=32f77845db610e4d9b53a4611fa75d8f" alt="Light Mode Image" width="1080" height="264" data-path="library/assets/triggers-assets/switchGroup-anatomy_light.svg" />

<img className="hidden w-full dark:block select-none drag-none" src="https://mintcdn.com/thesys/Ix1JbpbB1tWCO3US/library/assets/triggers-assets/switchGroup-anatomy_dark.svg?fit=max&auto=format&n=Ix1JbpbB1tWCO3US&q=85&s=eecfd89cf3495241ec970a51b97e900d" alt="Dark Mode Image" width="1080" height="264" data-path="library/assets/triggers-assets/switchGroup-anatomy_dark.svg" />

### 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."*
