> ## 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/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/buttons-variants_light.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=b5a6d39dedb8dc72e15675bfbe49a600" alt="Light Mode Image" width="1080" height="162" data-path="legacy/library/assets/triggers-assets/buttons-variants_light.svg" />

<img className="hidden w-full dark:block select-none drag-none" src="https://mintcdn.com/thesys/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/buttons-variants_dark.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=4ced4fcc2bf2a0d603d141d18eb6f209" alt="Dark Mode Image" width="1080" height="162" data-path="legacy/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/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/buttons-sizes_light-labelled.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=fac547694d469455fd6cacefb89c593d" alt="Light Mode Image" width="1080" height="307" data-path="legacy/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/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/buttons-sizes_dark-labelled.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=c58496c5afb7af72ef8e65650fe42641" alt="Dark Mode Image" width="1080" height="307" data-path="legacy/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/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/buttonGroup_light.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=a437fbe3e314de2e731e010b6371ccfb" alt="Light Mode Image" width="1080" height="288" data-path="legacy/library/assets/triggers-assets/buttonGroup_light.svg" />

<img className="hidden w-full dark:block select-none drag-none" src="https://mintcdn.com/thesys/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/buttonGroup_light-1.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=893d1703591856071a7998b6a35d4194" alt="Dark Mode Image" width="1080" height="288" data-path="legacy/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/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/button-anatomy_light-bg1.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=5a101bdf16640a421c3288f97f65995c" alt="Light Mode Image" width="1080" height="288" data-path="legacy/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/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/button-anatomy_dark-bg1.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=a4200e664d94c098c0f822cef7827bf9" alt="Dark Mode Image" width="1080" height="288" data-path="legacy/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/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/followUp_light.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=038c30dcdbfda7470320eb3c662031a8" alt="Light Mode Image" width="1080" height="268" data-path="legacy/library/assets/triggers-assets/followUp_light.svg" />

<img className="hidden w-full dark:block select-none drag-none" src="https://mintcdn.com/thesys/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/followUp_dark.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=cccb06d11e9236f3f8597a9ac7b06451" alt="Dark Mode Image" width="1080" height="268" data-path="legacy/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/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/switchGroup-variants_light.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=f876899c0aecbf5e77cd508f52f7f7ff" alt="Light Mode Image" width="1080" height="289" data-path="legacy/library/assets/triggers-assets/switchGroup-variants_light.svg" />

<img className="hidden w-full dark:block select-none drag-none" src="https://mintcdn.com/thesys/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/switchGroup-variants_dark.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=8a6acb0d38d1679abb67b8ac11f495dd" alt="Dark Mode Image" width="1080" height="289" data-path="legacy/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/FKXNpn4Pw_Bq7YCt/legacy/library/assets/triggers-assets/switchGroup-anatomy_light.svg?fit=max&auto=format&n=FKXNpn4Pw_Bq7YCt&q=85&s=834e265d72393bddfcd26347095540df" alt="Light Mode Image" width="1080" height="264" data-path="legacy/library/assets/triggers-assets/switchGroup-anatomy_light.svg" />

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