--- title: Button description: Buttons provide interactive elements with various styles, sizes, and icon options. --- ## Standard button types Buttons in Envision can be used to trigger actions (for example, save, submit, or close) or to navigate to other pages or routes. A button can be implemented as either a `

``` ## Call to Action button 2026.01.1 A call-to-action (CTA) button is a prominently styled button designed to encourage users to take a specific desired action. It is typically used in marketing-oriented layouts and links to a page, form, or other important destination. ```html

``` ### Call to action button color variants CTA buttons are available in brand and contextual color variants, allowing you to adapt the visual emphasis to different use cases and content contexts. Valid modifiers: `brand`, `primary`, `secondary`, `success`, `danger`, `info`, `warning` ```html

Call to Action Call to Action Call to Action

``` ## Sizes Standard buttons are available in four sizes: large, default, small, and slim. ```html

``` ## Block A block button spans the full width of its container. All button types and sizes, including CTA buttons, are available as block buttons. ```html

Call to Action

``` ## Standard button icons For standard buttons, additional modifier classes are used to position icons as desired. ### Icon button types ```html ``` ### Icon button sizes ```html ``` ### Small icon size ```html ``` ### Icon above Available in medium and large size. ```html ``` ## Call to Action button icons CTA buttons can also include icons, positioned before or after the text. No additional modifier classes are required for the button itself. The icons can be sized using the standard icon size modifier classes. ```html

Call to Action Call to Action

``` ## State ### Disabled The disabled state is available for standard buttons. ```html ```