PDS proposals
← All proposals

Send Button

A square, filled icon button (primary Button colors, IconButton shape and sizes) with three states:

Net-new componentOpen in Storybook

proposals/SendButton/send-button.css65 lines · View on GitHub
/* Same shape and sizes as IconButton, filled like a primary Button. */
.pds-send-button {
	--send-button-size: var(--pds-spacing-button-height-s);
	--send-button-background: var(--pds-color-button-primary-background-default);
	--send-button-background-hover: var(
		--pds-color-button-primary-background-hover
	);
	--send-button-background-active: var(
		--pds-color-button-primary-background-active
	);
	--send-button-foreground: var(--pds-color-button-primary-foreground);

	align-items: center;
	background-color: var(--send-button-background);
	border: var(--pds-border-width-default) solid transparent;
	border-radius: var(--pds-border-radius-input);
	box-sizing: border-box;
	color: var(--send-button-foreground);
	cursor: pointer;
	display: flex;
	height: var(--send-button-size);
	justify-content: center;
	position: relative;
	transition: var(--pds-animation-transition-button);
	width: var(--send-button-size);
}

.pds-send-button__content {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
}

.pds-send-button:hover:enabled {
	background-color: var(--send-button-background-hover);
}

.pds-send-button:active:enabled {
	background-color: var(--send-button-background-active);
	box-shadow: var(--pds-elevation-button-primary-active);
}

.pds-send-button:focus-visible {
	outline: var(--pds-border-width-outline) solid
		var(--pds-color-interactive-focus);
	outline-offset: 1px;
	transition: var(--pds-animation-transition-focus);
}

/* Nothing to send yet, or working. */
.pds-send-button:disabled {
	cursor: not-allowed;
	opacity: 40%;
}

/* Button Sizes */
.pds-send-button--xs {
	--send-button-size: var(--pds-spacing-button-height-xs);
}

.pds-send-button--m {
	--send-button-size: var(--pds-spacing-button-height-m);
}