Button

<cwc-control-button>

Custom Web Component, a button for forms and actions.

Example

Events

• event click click The button is clicked.

Attributes

• attribute type string The type for the control.
• attribute disabled flag Disabled control when present.

Style Variables

• css style variable --cwc-control-button--background Background color/image of button.
• css style variable --cwc-control-button--background--hover hover Background color/image of button on hover.
• css style variable --cwc-control-button--background--focus focus Background color/image of button on focus.
• css style variable --cwc-control-button--background--active active Background color/image of button on active.
• css style variable --cwc-control-button--border Border for button.
• css style variable --cwc-control-button--border-radius Border radius for button.
• css style variable --cwc-control-button--box-shadow Box shadow for button.
• css style variable --cwc-control-button--box-shadow--hover hover Box shadow for button on hover.
• css style variable --cwc-control-button--box-shadow--focus focus Box shadow for button on focus.
• css style variable --cwc-control-button--box-shadow--active active Box shadow for button on active.
• css style variable --cwc-control-button--cursor Cursor for button.
• css style variable --cwc-control-button--font-family Font family for button.
• css style variable --cwc-control-button--font-size Font size for button.
• css style variable --cwc-control-button--line-height Line height for button.
• css style variable --cwc-control-button--height Height for button.
• css style variable --cwc-control-button--outline Outline for button.
• css style variable --cwc-control-button--padding Padding for button.
• css style variable --cwc-control-button--width Width for button.

Slots

• root Single root slot for content to place in the component.

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/control/index.js"></script>

<style>
	.danger {
		--cwc-control-button--background: red;
		--cwc-control-button--color: white;
		--cwc-control-button--border: 1px solid transparent;
	}

	.danger:hover {
		--cwc-control-button--background--hover: darkred;
	}

	.danger:focus {
		--cwc-control-button--background--focus: darkred;
		--cwc-control-button--box-shadow--focus: 0 0 0 1px #f98a8a;
	}

	.danger:active {
		--cwc-control-button--background--active: darkred;
		--cwc-control-button--box-shadow--active: 0 0 0 2px #f98a8a;
	}
</style>

<cwc-control-button class="danger">Click Me Too</cwc-control-box>