Lightning Button Variants

Lightning Button Variants

If you ever wondered what are variants used for in lighting button tags, here is some detail for you.

Variants basically change the appearance of your component based on the type used. Used as variant keyword inside the tags you can specify the type based on the requirement. Following are some example of variants used:-


1:-  Base variant:  Makes a button look like a link .
<lightning:button variant=”base” label=”Base” title=”Base action”/>

2:-  Neutral variant (default) 
<lightning:button label=”Neutral” title=”Neutral action” />

3:-  Brand variant: Identifies the primary action in a group of buttons.
<lightning:button variant=”brand” label=”Brand action” title=”Brand action” />

4:-  Destructive variant: Identifies a potentially negative action 
<lightning:button variant=”destructive” label=”Destructive” title=”Destructive action” />

5:-  Success variant:  Identifies a successful action 
<lightning:button variant=”success” label=”Success” title=”Success”  />

If you pass in a variant which is not supported, the component picks the default variant as current variant.

Following is the appearnce of button at different variants:- 

button variant example
(Visited 279 times, 1 visits today)

Leave a Reply