--- schema_version: "1" id: a3e3668dcba04956e8aae1d31e13e7f6863149676192b8ba8866abaad782b2ae title: Button Lightning Web Component (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_button_lightning_web_component.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_button_lightning_web_component.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 14df8afc86cddba125e7c52bb3c8c33a2b58c104d92446141766783bd22548c6 description: For the managed package runtime, this page contains a Button LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # Button Lightning Web Component (Managed Package) For the managed package runtime, this page contains a Button LWC ReadMe for each Vlocity release. ![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). ## Vlocity Insurance and Health Summer '20 The _Button Lightning Web Component_ renders a button element to perform an action. ## Available c-button Attributes

Attribute

Value

Type

Required

Description

bg-color

Accepts name, rgb and hex

string

  

Adds a background color to the button element.

disable-tab

true, false (Default: false)

boolean

  

To remove the button element from tab focus.

disabled

true, false (Default: false)

boolean

  

To disable button, set to false.

extraclass

  

string

  

Adds a class to the button element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

icon-bg-color

Accepts name, rgb and hex values.

string

  

Adds a background color to the icon.

icon-fill

Accepts name, rgb and hex values.

string

  

Adds color inside the icon.

icon-name

(Format: utility:close)

string

  

Adds an icon to the button. See SLDS icons.

icon-position

left, right (Default: left, if label is specified)

string

  

Sets the position of the button icon.

icon-size

xx-small, x-small, small, medium, large (Default: xx-small)

string

  

Sets the icon size for the button element.

icon-url

URL

string

  

Overrides the defined url for the icon svg resource.

icon-variant

inverse, warning, error , success, light, default (Default: default)

string

  

Changes the appearance of the icon. The inverse variant adds a white fill on a dark background.

label

  

string

  

Adds a visible label for the button element.

styles

  

string

  

To set inline styles of label. it should be in this formt style = { "label": ""}

theme

slds, nds (Default: slds)

string

  

Sets the theme for the button.

type

reset, button, submit (Default: button)

    

Sets the type of button element.

variant

  

string

  

Sets the style of the button based on the typesupported by the chosen theme. For example, success, brand, and so on.
## Example c-button Component ``` ``` ## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 The _Button Lightning Web Component_ renders a button element to perform an action. ## Available c-button Attributes

Attribute

Value

Type

Required

Description

bg-color

Accepts name, rgb and hex

string

  

Adds a background color to the button element.

disable-tab

true, false (Default: false)

boolean

  

To remove the button element from tab focus.

disabled

true, false (Default: false)

boolean

  

To disable button, set to false.

extraclass

  

string

  

Adds a class to the button element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

icon-bg-color

Accepts name, rgb and hex values.

string

  

Adds a background color to the icon.

icon-fill

Accepts name, rgb and hex values.

string

  

Adds color inside the icon.

icon-name

(Format: utility:close)

string

  

Adds an icon to the button. See SLDS icons.

icon-position

left, right (Default: left)

string

  

Sets the position of the button icon.

icon-size

xx-small, x-small, small, medium, large (Default: xx-small)

string

  

Sets the icon size for the button element.

icon-url

URL

string

  

Overrides the defined url for the icon svg resource.

icon-variant

inverse, warning, error , success, light, default (Default: default)

string

  

Changes the appearance of the icon. The inverse variant adds a white fill on a dark background.

label

  

string

  

Adds a visible label for the button element.

theme

slds, nds (Default: slds)

string

  

Sets the theme for the button.

type

reset, button, submit (Default: button)

    

Sets the type of button element.

variant

  

string

  

Sets the style of the button based on the typesupported by the chosen theme. For example, success, brand, and so on.
## Example c-button Component ``` ``` ## Button Lightning Web Component The _Button Lightning Web Component_ renders a button element to perform an action. ## Available c-button Attributes

Attribute

Value

Type

Required

Description

bg-color

Accepts name, rgb and hex

string

  

Adds a background color to the button element.

disable-tab

true, false (Default: false)

boolean

  

To remove the button element from tab focus.

disabled

true, false (Default: false)

boolean

  

To disable button, set to false.

extraclass

  

string

  

Adds a class to the button element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

icon-bg-color

Accepts name, rgb and hex values.

string

  

Adds a background color to the icon.

icon-fill

Accepts name, rgb and hex values.

string

  

Adds color inside the icon.

icon-name

(Format: utility:close)

string

  

Adds an icon to the button. See SLDS icons.

icon-position

left, right (Default: left)

string

  

Sets the position of the button icon.

icon-size

xx-small, x-small, small, medium, large (Default: xx-small)

string

  

Sets the icon size for the button element.

icon-url

URL

string

  

Overrides the defined url for the icon svg resource.

icon-variant

inverse, warning, error , success, light, default (Default: default)

string

  

Changes the appearance of the icon. The inverse variant adds a white fill on a dark background.

label

  

string

  

Adds a visible label for the button element.

theme

slds, nds (Default: slds)

string

  

Sets the theme for the button.

type

reset, button, submit (Default: button)

    

Sets the type of button element.

variant

  

string

  

Sets the style of the button based on the typesupported by the chosen theme. For example, success, brand, and so on.
## Example c-button Component ``` ``` ## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19 The _Button Lightning Web Component_ renders a button element to perform an action. ## Available c-button Attributes

Attribute

Value

Type

Required

Description

bg-color

Accepts name, rgb and hex

string

  

Adds a background color to the button element.

disable-tab

true, false (Default: false)

boolean

  

To remove the button element from tab focus.

disabled

true, false (Default: false)

boolean

  

To disable button, set to false.

extraclass

  

string

  

Adds a class to the button element. To add multiple classes, use a space to separate each class, such as `classone classtwo'.

icon-bg-color

Accepts name, rgb and hex values.

string

  

Adds a background color to the icon.

icon-fill

Accepts name, rgb and hex values.

string

  

Adds color inside the icon.

icon-name

(Format: utility:close)

string

  

Adds an icon to the button. See SLDS icons.

icon-position

left, right (Default: left)

string

  

Sets the position of the button icon.

icon-size

xx-small, x-small, small, medium, large (Default: xx-small)

string

  

Sets the icon size for the button element.

icon-url

URL

string

  

Overrides the defined url for the icon svg resource.

icon-variant

inverse, warning, error , success, light, default (Default: default)

string

  

Changes the appearance of the icon. The inverse variant adds a white fill on a dark background.

label

  

string

  

Adds a visible label for the button element.

theme

slds, nds (Default: slds)

string

  

Sets the theme for the button.

type

reset, button, submit (Default: button)

    

Sets the type of button element.

variant

  

string

  

Sets the style of the button based on the typesupported by the chosen theme. For example, success, brand, and so on.
## Example c-button Component ``` ```