Skip to content

Instantly share code, notes, and snippets.

@smashercosmo

smashercosmo/Button.module.css

Created September 8, 2026 20:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save smashercosmo/f7e1198e877abc423e2f9be52bd2ebfa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save smashercosmo/f7e1198e877abc423e2f9be52bd2ebfa to your computer and use it in GitHub Desktop.
Download ZIP
Button
Raw
Button.module.css
.root {
--dc-button-color: inherit;
--dc-button-border-color: inherit;
--dc-button-background-color: inherit;
--dc-button-icon-size: inherit;
--dc-button-gap: inherit;
--dc-button-block-size: inherit;
--dc-button-inline-size: inherit;
--dc-button-content-inline-size: inherit;
--dc-button-padding-block: inherit;
--dc-button-padding-inline-start: inherit;
--dc-button-padding-inline-end: inherit;
--dc-button-justify-content: inherit;
--dc-button-border-inline-end-width: inherit;
--dc-button-border-inline-start-width: inherit;
--dc-button-border-block-width: inherit;
--dc-button-border-start-end-radius: inherit;
--dc-button-border-end-end-radius: inherit;
--dc-button-border-end-start-radius: inherit;
--dc-button-border-start-start-radius: inherit;
--dc-button-icon-size-default: 1rem;
--dc-button-inline-size-default: auto;
--dc-button-content-inline-size-default: auto;
--dc-button-padding-block-default: 0;
--dc-button-justify-content-default: center;
--dc-button-border-inline-end-width-default: 1px;
--dc-button-border-inline-start-width-default: 1px;
--dc-button-border-block-width-default: 1px;
--dc-button-border-start-end-radius-default: var(--radii-md);
--dc-button-border-end-end-radius-default: var(--radii-md);
--dc-button-border-end-start-radius-default: var(--radii-md);
--dc-button-border-start-start-radius-default: var(--radii-md);
flex: none;
display: inline-flex;
align-items: center;
user-select: none;
white-space: nowrap;
position: relative;
text-decoration: none;
overflow: hidden;
border-style: solid;
justify-content: var(
--dc-button-justify-content,
var(--dc-button-justify-content-default)
);
border-color: var(--dc-button-border-color, var(--dc-button-border-color-default));
background-color: var(--dc-button-background-color, var(--dc-button-background-color-default));
color: var(--dc-button-color, var(--dc-button-color-default));
gap: var(--dc-button-gap, var(--dc-button-gap-default));
block-size: var(--dc-button-block-size, var(--dc-button-block-size-default));
inline-size: var(--dc-button-inline-size, var(--dc-button-inline-size-default));
min-inline-size: var(--dc-button-block-size, var(--dc-button-block-size-default));
padding-block: var(
--dc-button-padding-block,
var(--dc-button-padding-block-default)
);
padding-inline-start: var(
--dc-button-padding-inline-start,
var(--dc-button-padding-inline-start-default)
);
padding-inline-end: var(
--dc-button-padding-inline-end,
var(--dc-button-padding-inline-end-default)
);
border-inline-end-width: var(
--dc-button-border-inline-end-width,
var(--dc-button-border-inline-end-width-default)
);
border-inline-start-width: var(
--dc-button-border-inline-start-width,
var(--dc-button-border-inline-start-width-default)
);
border-block-width: var(
--dc-button-border-block-width,
var(--dc-button-border-block-width-default)
);
border-start-end-radius: var(
--dc-button-border-start-end-radius,
var(--dc-button-border-start-end-radius-default)
);
border-end-end-radius: var(
--dc-button-border-end-end-radius,
var(--dc-button-border-end-end-radius-default)
);
border-end-start-radius: var(
--dc-button-border-end-start-radius,
var(--dc-button-border-end-start-radius-default)
);
border-start-start-radius: var(
--dc-button-border-start-start-radius,
var(--dc-button-border-start-start-radius-default)
);
}
.small {
--dc-button-gap-default: 0.25rem;
--dc-button-block-size-default: 1.5rem;
}
.medium {
--dc-button-gap-default: 0.5rem;
--dc-button-block-size-default: 2rem;
}
.large {
--dc-button-gap-default: 0.5rem;
--dc-button-block-size-default: 3rem;
}
.content {
inline-size: var(
--dc-button-content-inline-size,
var(--dc-button-content-inline-size-default)
);
}
/* to remove the gap between the content and icons */
.content:empty {
display: none;
}
/**
* Special case for menu button with just icon
*/
.root:has(.content:empty) {
&.small {
&:has(.icon:first-child):has(.content + .icon) {
--dc-button-padding-inline-start-default: var(--spacing-xs);
--dc-button-padding-inline-end-default: var(--spacing-xs);
}
}
&.medium {
&:has(.icon:first-child):has(.content + .icon) {
--dc-button-padding-inline-start-default: var(--spacing-sm);
--dc-button-padding-inline-end-default: var(--spacing-sm);
}
}
&.large {
&:has(.icon:first-child):has(.content + .icon) {
--dc-button-padding-inline-start-default: var(--spacing-md);
--dc-button-padding-inline-end-default: var(--spacing-md);
}
}
}
.root:has(.content:not(:empty)) {
&.small {
&:has(:first-child:not(.icon)):has(.content + :not(.icon)) {
--dc-button-padding-inline-start-default: 0.5rem;
--dc-button-padding-inline-end-default: 0.5rem;
}
&:has(.icon:first-child):has(.content + :not(.icon)) {
--dc-button-padding-inline-start-default: 0.25rem;
--dc-button-padding-inline-end-default: 0.5rem;
}
&:has(:first-child:not(.icon)):has(.content + .icon) {
--dc-button-padding-inline-start-default: 0.5rem;
--dc-button-padding-inline-end-default: 0.25rem;
}
&:has(.icon:first-child):has(.content + .icon) {
--dc-button-padding-inline-start-default: 0.25rem;
--dc-button-padding-inline-end-default: 0.25rem;
}
}
&.medium {
&:has(:first-child:not(.icon)):has(.content + :not(.icon)) {
--dc-button-padding-inline-start-default: 1rem;
--dc-button-padding-inline-end-default: 1rem;
}
&:has(.icon:first-child):has(.content + :not(.icon)) {
--dc-button-padding-inline-start-default: 0.75rem;
--dc-button-padding-inline-end-default: 1rem;
}
&:has(:first-child:not(.icon)):has(.content + .icon) {
--dc-button-padding-inline-start-default: 1rem;
--dc-button-padding-inline-end-default: 0.75rem;
}
&:has(.icon:first-child):has(.content + .icon) {
--dc-button-padding-inline-start-default: 0.75rem;
--dc-button-padding-inline-end-default: 0.75rem;
}
}
&.large {
&:has(:first-child:not(.icon)):has(.content + :not(.icon)) {
--dc-button-padding-inline-start-default: 1.5rem;
--dc-button-padding-inline-end-default: 1.5rem;
}
&:has(.icon:first-child):has(.content + :not(.icon)) {
--dc-button-padding-inline-start-default: 1rem;
--dc-button-padding-inline-end-default: 1.5rem;
}
&:has(:first-child:not(.icon)):has(.content + .icon) {
--dc-button-padding-inline-start-default: 1.5rem;
--dc-button-padding-inline-end-default: 1rem;
}
&:has(.icon:first-child):has(.content + .icon) {
--dc-button-padding-inline-start-default: 1rem;
--dc-button-padding-inline-end-default: 1rem;
}
}
}
.svg {
inline-size: var(--dc-button-icon-size, var(--dc-button-icon-size-default));
block-size: var(--dc-button-icon-size, var(--dc-button-icon-size-default));
}
.icon {
/* https://github.com/adobe/react-spectrum/issues/5962#issuecomment-1970246060 */
pointer-events: none;
}
.root[data-pending] :is(.icon, .content) {
opacity: 0;
}
.root:not([data-pending]) .spinner {
display: none;
}
.root[data-pending] .spinner {
display: flex;
}
.spinner {
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
}
.root[data-disabled] {
--dc-button-color-default: var(--colors-grey-500);
}
.root:is(a, button):not([data-disabled]) {
cursor: pointer;
}
.root:is(a, button)[data-disabled] {
cursor: not-allowed;
}
.root[data-disabled] {
cursor: not-allowed;
}
.contained {
&.primary {
&:not(
/* prettier-ignore */
[data-disabled],
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: var(--colors-brand-main);
--dc-button-border-color-default: var(--colors-brand-main);
--dc-button-color-default: var(--colors-bg-primary);
}
&:not([data-disabled]):is(
/* prettier-ignore */
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: var(--colors-brand-dark);
--dc-button-border-color-default: var(--colors-brand-dark);
--dc-button-color-default: var(--colors-bg-primary);
}
}
&.secondary {
&:not(
/* prettier-ignore */
[data-disabled],
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: var(--colors-grey-200);
--dc-button-border-color-default: var(--colors-grey-200);
--dc-button-color-default: var(--colors-text-primary);
}
&:not([data-disabled]):is(
/* prettier-ignore */
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: var(--colors-grey-300);
--dc-button-border-color-default: var(--colors-grey-300);
--dc-button-color-default: var(--colors-text-primary);
}
}
&.danger {
&:not(
/* prettier-ignore */
[data-disabled],
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: var(--colors-error-main);
--dc-button-border-color-default: var(--colors-error-main);
--dc-button-color-default: var(--colors-bg-primary);
}
&:not([data-disabled]):is(
/* prettier-ignore */
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: var(--colors-error-dark);
--dc-button-border-color-default: var(--colors-error-dark);
--dc-button-color-default: var(--colors-bg-primary);
}
}
}
.contained[data-disabled] {
--dc-button-border-color-default: var(--colors-grey-200);
--dc-button-background-color-default: var(--colors-grey-200);
}
.outlined {
--dc-button-background-color-default: var(--colors-bg-primary);
}
.outlined {
&.primary {
&:not(
[data-disabled],
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-border-color-default: var(--colors-brand-main);
--dc-button-color-default: var(--colors-brand-main);
}
&:not([data-disabled]):is(
/* prettier-ignore */
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: var(--colors-info-surface);
--dc-button-border-color-default: var(--colors-brand-dark);
--dc-button-color-default: var(--colors-brand-dark);
}
}
&.secondary {
&:not(
[data-disabled],
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-border-color-default: var(--colors-grey-400);
--dc-button-color-default: var(--colors-text-primary);
}
&:not([data-disabled]):is(
/* prettier-ignore */
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: var(--colors-grey-50);
--dc-button-border-color-default: var(--colors-grey-500);
--dc-button-color-default: var(--colors-text-primary);
}
}
&.danger {
&:not(
/* prettier-ignore */
[data-disabled],
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-border-color-default: var(--colors-error-main);
--dc-button-color-default: var(--colors-error-main);
}
&:not([data-disabled]):is(
/* prettier-ignore */
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: var(--colors-error-surface);
--dc-button-border-color-default: var(--colors-error-dark);
--dc-button-color-default: var(--colors-error-dark);
}
}
}
.outlined[data-disabled] {
--dc-button-border-color-default: var(--colors-grey-300);
}
.text {
--dc-button-border-color-default: transparent;
}
.text {
&.primary {
&:not(
/* prettier-ignore */
[data-disabled],
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: transparent;
--dc-button-color-default: var(--colors-brand-main);
}
&:not([data-disabled]):is(
/* prettier-ignore */
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: var(--colors-grey-100);
--dc-button-color-default: var(--colors-brand-dark);
}
}
&.secondary {
&:not(
/* prettier-ignore */
[data-disabled],
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: transparent;
--dc-button-color-default: var(--colors-text-primary);
}
&:not([data-disabled]):is(
/* prettier-ignore */
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: var(--colors-grey-100);
--dc-button-color-default: var(--colors-text-primary);
}
}
&.danger {
&:not(
/* prettier-ignore */
[data-disabled],
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: transparent;
--dc-button-color-default: var(--colors-error-main);
}
&:not([data-disabled]):is(
/* prettier-ignore */
[data-hovered],
[data-focused],
[data-pressed],
[data-focus-visible]
) {
--dc-button-background-color-default: var(--colors-error-surface);
--dc-button-color-default: var(--colors-error-dark);
}
}
}
.text[data-disabled] {
--dc-button-background-color-default: transparent;
}
.info {
border-radius: var(--radii-md);
position: absolute;
inset: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment