material-web/button/elevated-button.ts
Material Web Team 74bda6e11c Document md-button
PiperOrigin-RevId: 495160072
2022-12-13 16:45:36 -08:00

47 lines
1.3 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import {customElement} from 'lit/decorators.js';
import {ElevatedButton} from './lib/elevated-button.js';
import {styles as elevatedStyles} from './lib/elevated-styles.css.js';
import {styles as sharedElevationStyles} from './lib/shared-elevation-styles.css.js';
import {styles as sharedStyles} from './lib/shared-styles.css.js';
declare global {
interface HTMLElementTagNameMap {
'md-elevated-button': MdElevatedButton;
}
}
/**
* @summary Buttons help people take action, such as sending an email, sharing a
* document, or liking a comment.
*
* @description
* __Emphasis:__ Medium emphasis For important actions that dont distract
* from other onscreen elements.
*
* __Rationale:__ Elevated buttons are essentially filled buttons with a lighter
* background color and a shadow. To prevent shadow creep, only use them when
* absolutely necessary, such as when the button requires visual separation from
* a patterned background.
*
* __Example usages:__
* - Reply
* - View all
* - Add to cart
* - Take out of trash
*
* @final
* @suppress {visibility}
*/
@customElement('md-elevated-button')
export class MdElevatedButton extends ElevatedButton {
static override styles =
[sharedStyles, sharedElevationStyles, elevatedStyles];
}