LWC Progress | ( Lessons)

GO TO COURSE

Lesson: 05 | Button

Base variant: Makes a button look like a link

HTML

<template>
        <lightning-button variant="base" label="Base" title="Looks like a link"></lightning-button>
        
</template>

Neutral variant (default)

HTML

<template>
    <lightning-button label="Neutral" title="Non-primary action">
    </lightning-button>        
</template>

Brand variant: Identifies the primary action in a group of buttons

HTML

<template>
    <lightning-button variant="brand" label="Brand" title="Primary Action" >
    </lightning-button>     
</template>

Brand outline variant: Identifies the primary action in a group of buttons, but has a lighter look

HTML

<template>
    <lightning-button variant="brand-outline" label="Brand Outline" title="Primary action with lighter look" >
    </lightning-button>   
</template>

Destructive variant: Identifies a potentially negative action

HTML

<template>
    <lightning-button variant="destructive" label="Destructive" title="Destructive action" ></lightning-button>
</template>

Destructive text variant: Identifies a potentially negative action, but has a lighter look

HTML

<template>
    <lightning-button variant="destructive-text" label="Destructive Text" title="Destructive action with a lighter look" >
    </lightning-button>
</template>

Success variant: Identifies a successful action

HTML

<template>
    <lightning-button variant="success" label="Success" title="Successful action" ></lightning-button>
</template>

HTML

<button class="slds-button">Button</button>
<button class="slds-button slds-button_neutral">Neutral Button</button>
<button class="slds-button slds-button_brand">Brand Button</button>
<button class="slds-button slds-button_outline-brand">Outline Brand Button</button>
<button class="slds-button slds-button_destructive">Destructive Button</button>
<button class="slds-button slds-button_text-destructive">Text Destructive Button</button>
<button class="slds-button slds-button_success">Success Button</button>

Prev You need to login to have access to the quizzes. Next

Mastered by 56 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Lesson: 05 | Button

Base variant: Makes a button look like a link

HTML

Preview

Video

Neutral variant (default)

HTML

Preview

Video

Brand variant: Identifies the primary action in a group of buttons

HTML

Preview

Video

Brand outline variant: Identifies the primary action in a group of buttons, but has a lighter look

HTML

Preview

Video

Destructive variant: Identifies a potentially negative action

HTML

Preview

Video

Destructive text variant: Identifies a potentially negative action, but has a lighter look

HTML

Preview

Video

Success variant: Identifies a successful action

HTML

Preview

Video

HTML

Preview

Video

Lightning Web Components

Login to your account

Lesson: 05 | Button

Base variant: Makes a button look like a link

HTML

Neutral variant (default)

HTML

Brand variant: Identifies the primary action in a group of buttons

HTML

Brand outline variant: Identifies the primary action in a group of buttons, but has a lighter look

HTML

Destructive variant: Identifies a potentially negative action

HTML

Destructive text variant: Identifies a potentially negative action, but has a lighter look

HTML

Success variant: Identifies a successful action

HTML

HTML

Lightning Web Components