-
Notifications
You must be signed in to change notification settings - Fork 3
/
Button (lwc)
35 lines (27 loc) · 2.24 KB
/
Button (lwc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Desciption = Here thid button is useed to display navigation on the standard page layout of salesforce.
<template>
<div class="slds-m-top_small slds-m-bottom_medium">
<h2 class="slds-text-heading_small slds-m-bottom_small">
Click the buttons to activate the <code>onclick</code> handler and view the label of the clicked button.
</h2>
// new component
<lightning-file-upload
label="Attach receipt"
<lightning-button variant="brand" class="slds-button" data-id="Blue_Button" label="Text Blue" onclick={handle_Blue_Text_Click}></lightning-button>
<!-- Base variant: Makes a button look like a link -->
<lightning-button variant="base" label="Base" title="Looks like a link" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
<!-- Neutral variant (default) -->
<lightning-button label="Neutral" title="Non-primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
<!-- Brand variant: Identifies the primary action in a group of buttons -->
<!-- Brand outline variant: Identifies the primary action in a group of buttons, but has a lighter look -->
<lightning-button variant="brand-outline" label="Brand Outline" title="Primary action with lighter look" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
<lightning-button variant="destructive" label="Destructive" title="Destructive action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
<!-- Destructive text variant: Identifies a potentially negative action, but has a lighter look -->
<lightning-button variant="destructive-text" label="Destructive Text" title="Destructive action with a lighter look" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
<!-- Success variant: Identifies a successful action -->
<lightning-button variant="success" label="Success" title="Successful action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
</div>
<div class="slds-m-vertical_medium">
<p>The label of the button that was clicked is: <span class="slds-text-heading_small">{clickedButtonLabel}</span></p>
</div>
</template>