You are here:
Button Lightning Web Component (Managed Package)
For the managed package runtime, this page contains a Button LWC ReadMe for each Vlocity release.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
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 |
||
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
<c-button
icon-url="/slds"
variant="brand"
disabled=""
label="disabled"
icon-name="utility:close"
icon-position="right"
></c-button>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
<c-button
icon-url="/slds"
variant="brand"
disabled=""
label="disabled"
icon-name="utility:close"
icon-position="right"
></c-button>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
<c-button
icon-url="/slds"
variant="brand"
disabled=""
label="disabled"
icon-name="utility:close"
icon-position="right"
></c-button>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. |
