LWC Progress | ( Lessons)

Continue GO TO COURSE

Lesson: 06 | Button Group

Button group: simple buttons

HTML

<template>
    <lightning-button-group>
    <lightning-button label="Refresh"></lightning-button>
    <lightning-button label="Edit"></lightning-button>
    <lightning-button label="Save"></lightning-button>
    </lightning-button-group>
</template>

Button group using several button variations

HTML

<template>
    <lightning-button label="Refresh" icon-name="utility:refresh"></lightning-button>
    <lightning-button label="Edit" icon-name="utility:edit"></lightning-button>
    <lightning-button label="Save" icon-name="utility:save"></lightning-button>
    <lightning-button label="Delete" variant="destructive" icon-name="utility:delete"></lightning-button>
</template>

Button group using setting and like:

HTML

<template>
    <lightning-button-group>
            <lightning-button-icon icon-name="utility:settings" variant="border-filled" alternative-text="Settings"></lightning-button-icon> 
            <lightning-button-icon icon-name="utility:like" variant="border-filled" alternative-text="Like"></lightning-button-icon>        
        </lightning-button-group>
</template>

Button: Follow & Unfollow

HTML

<template>
    <lightning-button-stateful
                selected={buttonStatefulState}
                label-when-off="Follow"
                label-when-on="Following"
                label-when-hover="Unfollow"
                icon-name-when-off="utility:add"
                icon-name-when-on="utility:check"
                icon-name-when-hover="utility:close"
                onclick={handleButtonStatefulClick}
            >
    </lightning-button-stateful>
</template>

Lightning Button Menu

HTML

<template>
    <lightning-button-menu alternative-text="Show menu">
        <lightning-menu-item label="Menu Item One" value="item1"></lightning-menu-item>
        <lightning-menu-item label="Menu Item Two" value="item2"></lightning-menu-item>
        <lightning-menu-item label="Menu Item Three" value="item3"></lightning-menu-item>
    </lightning-button-menu>
</template>

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 (42 lessons)

D. Java Script Methods for LWC (24 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Lesson: 06 | Button Group

Button group: simple buttons

HTML

Preview

Video

Button group using several button variations

HTML

Preview

Video

Button group using setting and like:

HTML

Preview

Video

Button: Follow & Unfollow

HTML

Preview

Video

Lightning Button Menu

HTML

Preview

Video

Lightning Web Components

Login to your account

Lesson: 06 | Button Group

Button group: simple buttons

HTML

Button group using several button variations

HTML

Button group using setting and like:

HTML

Button: Follow & Unfollow

HTML

Lightning Button Menu

HTML

Lightning Web Components