@shopify/polaris/build/esnext/components/Button/Button.out.css

Shopify’s admin product component library

.Polaris-Button_r99lw{
  --pc-button-gap:var(--p-space-050);
  --pc-button-bg:transparent;
  --pc-button-bg_hover:var(--pc-button-bg);
  --pc-button-bg_active:var(--pc-button-bg);
  --pc-button-bg_pressed:var(--pc-button-bg_active);
  --pc-button-bg_disabled:var(--p-color-bg-fill-disabled);
  --pc-button-color:inherit;
  --pc-button-color_hover:var(--pc-button-color);
  --pc-button-color_active:var(--pc-button-color);
  --pc-button-color_pressed:var(--pc-button-color_active);
  --pc-button-color_disabled:var(--p-color-text-disabled);
  --pc-button-box-shadow:transparent;
  --pc-button-box-shadow_hover:var(--pc-button-box-shadow);
  --pc-button-box-shadow_active:var(--pc-button-box-shadow);
  --pc-button-box-shadow_pressed:var(--pc-button-box-shadow_active);
  --pc-button-box-shadow_disabled:var(--pc-button-box-shadow);
  --pc-button-icon-fill:currentColor;
  --pc-button-icon-fill_hover:var(--pc-button-icon-fill);
  --pc-button-icon-fill_active:var(--pc-button-icon-fill);
  --pc-button-icon-fill_pressed:var(--pc-button-icon-fill_active);
  --pc-button-icon-fill_disabled:var(--p-color-icon-disabled);
  all:unset;
  position:relative;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  gap:var(--pc-button-gap);
  padding:var(--pc-button-padding-block) var(--pc-button-padding-inline);
  background:var(--pc-button-bg);
  border:none;
  border-radius:var(--p-border-radius-200);
  box-shadow:var(--pc-button-box-shadow);
  color:var(--pc-button-color);
  cursor:pointer;
  -webkit-user-select:none;
          user-select:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.Polaris-Button_r99lw.Polaris-Button_r99lw svg{
  fill:var(--pc-button-icon-fill);
}

.Polaris-Button_r99lw.Polaris-Button_r99lw:hover svg{
  fill:var(--pc-button-icon-fill_hover);
}

.Polaris-Button_r99lw.Polaris-Button_r99lw:active,
.Polaris-Button_r99lw.Polaris-Button_r99lw[data-state='open'] svg{
  fill:var(--pc-button-icon-fill_active);
}

.Polaris-Button_r99lw.Polaris-Button_r99lw:disabled,
.Polaris-Button_r99lw.Polaris-Button_r99lw[disabled],
.Polaris-Button--disabled_hcuh9.Polaris-Button--disabled_hcuh9 svg{
  fill:var(--pc-button-icon-fill_disabled);
}

.Polaris-Button--pressed_17w8v.Polaris-Button--pressed_17w8v,
.Polaris-Button--pressed_17w8v.Polaris-Button--pressed_17w8v:hover,
.Polaris-Button--pressed_17w8v.Polaris-Button--pressed_17w8v:active,
.Polaris-Button--pressed_17w8v.Polaris-Button--pressed_17w8v:focus-visible svg{
  fill:var(--pc-button-icon-fill_pressed);
}

.Polaris-Button_r99lw:hover{
  background:var(--pc-button-bg_hover);
  color:var(--pc-button-color_hover);
  box-shadow:var(--pc-button-box-shadow_hover);
}

.Polaris-Button_r99lw:active,
.Polaris-Button_r99lw[data-state='open']{
  background:var(--pc-button-bg_active);
  color:var(--pc-button-color_active);
  box-shadow:var(--pc-button-box-shadow_active);
}

.Polaris-Button_r99lw:focus-visible{
  background:var(--pc-button-bg_hover);
  color:var(--pc-button-color_hover);
  outline:var(--p-border-width-050) solid var(--p-color-border-focus);
  outline-offset:var(--p-space-025);
}

.Polaris-Button_r99lw:focus-visible::after{
    content:none;
  }

.Polaris-Button_r99lw:disabled,
.Polaris-Button_r99lw[disabled],
.Polaris-Button--disabled_hcuh9{
  background:var(--pc-button-bg_disabled);
  color:var(--pc-button-color_disabled);
  box-shadow:none;
  -webkit-user-select:none;
          user-select:none;
  pointer-events:none;
}

.Polaris-Button--pressed_17w8v,
.Polaris-Button--pressed_17w8v:hover,
.Polaris-Button--pressed_17w8v:active,
.Polaris-Button--pressed_17w8v:focus-visible{
  background:var(--pc-button-bg_pressed);
  color:var(--pc-button-color_pressed);
  box-shadow:var(--pc-button-box-shadow_pressed);
}

.Polaris-Button--variantPrimary_1stsb{
  --pc-button-bg-gradient:var(--p-color-button-gradient-bg-fill);
  --pc-button-box-shadow:var(--p-shadow-button-primary);
  --pc-button-box-shadow_active:var(--p-shadow-button-primary-inset);
  --pc-button-bg:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);
  --pc-button-bg_hover:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-hover);
  --pc-button-bg_active:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-active);
  --pc-button-bg_disabled:var(--p-color-bg-fill-brand-disabled);
  --pc-button-color:var(--p-color-text-brand-on-bg-fill);
  --pc-button-color_disabled:var(--p-color-text-brand-on-bg-fill-disabled);
  --pc-button-icon-fill:var(--p-color-text-brand-on-bg-fill);
  --pc-button-icon-fill_disabled:var(--p-color-text-brand-on-bg-fill-disabled);
}

.Polaris-Button--variantSecondary_moc9w{
  --pc-button-box-shadow:var(--p-shadow-button);
  --pc-button-box-shadow_active:var(--p-shadow-button-inset);
  --pc-button-bg:var(--p-color-bg-fill);
  --pc-button-bg_hover:var(--p-color-bg-fill-hover);
  --pc-button-bg_active:var(--p-color-bg-fill-active);
  --pc-button-bg_pressed:var(--p-color-bg-fill-selected);
  --pc-button-color:var(--p-color-text);
  --pc-button-icon-fill:var(--p-color-icon);
}

.Polaris-Button--variantTertiary_ibcmv{
  --pc-button-bg_hover:var(--p-color-bg-fill-transparent-hover);
  --pc-button-bg_active:var(--p-color-bg-fill-transparent-active);
  --pc-button-bg_pressed:var(--p-color-bg-fill-selected);
  --pc-button-bg_disabled:transparent;
  --pc-button-color:var(--p-color-text);
  --pc-button-icon-fill:var(--p-color-icon);
}

.Polaris-Button--variantPlain_1bx18{
  --pc-button-color:var(--p-color-text-link);
  --pc-button-color_hover:var(--p-color-text-link-hover);
  --pc-button-color_active:var(--p-color-text-link-active);
}

.Polaris-Button--variantPlain_1bx18:is(:hover, :active, :focus-visible):not(.Polaris-Button--removeUnderline_adav6){
  text-decoration:underline;
}

.Polaris-Button--variantMonochromePlain_55h85{
  --pc-button-icon-fill:currentColor;
}

.Polaris-Button--variantPlain_1bx18,
.Polaris-Button--variantMonochromePlain_55h85{
  --pc-button-bg_disabled:transparent;
  margin:calc(var(--pc-button-padding-block)*-1) calc(var(--pc-button-padding-inline)*-1);
}

.Polaris-Button--variantPlain_1bx18:focus-visible,
.Polaris-Button--variantMonochromePlain_55h85:focus-visible{
  border-radius:var(--p-border-radius-300);
  outline-offset:calc(var(--pc-button-padding-block)*-1);
}

.Polaris-Button--toneSuccess_15hst:is(.Polaris-Button--variantSecondary_moc9w, .Polaris-Button--variantTertiary_ibcmv, .Polaris-Button--variantPlain_1bx18){
  --pc-button-color:var(--p-color-text-success);
  --pc-button-color_hover:var(--p-color-text-success-hover);
  --pc-button-color_active:var(--p-color-text-success-active);
  --pc-button-icon-fill:currentColor;
}

.Polaris-Button--toneCritical_jv6uf:is(.Polaris-Button--variantSecondary_moc9w, .Polaris-Button--variantTertiary_ibcmv, .Polaris-Button--variantPlain_1bx18){
  --pc-button-color:var(--p-color-text-critical);
  --pc-button-color_hover:var(--p-color-text-critical-hover);
  --pc-button-color_active:var(--p-color-text-critical-active);
  --pc-button-icon-fill:currentColor;
}

.Polaris-Button--toneSuccess_15hst:is(.Polaris-Button--variantPrimary_1stsb){
  --pc-button-box-shadow:var(--p-shadow-button-primary-success);
  --pc-button-box-shadow_active:var(--p-shadow-button-primary-success-inset);
  --pc-button-bg:var(--p-color-bg-fill-success);
  --pc-button-bg_hover:var(--p-color-bg-fill-success-hover);
  --pc-button-bg_active:var(--p-color-bg-fill-success-active);
  --pc-button-bg_pressed:var(--p-color-bg-fill-success-selected);
}

.Polaris-Button--toneCritical_jv6uf:is(.Polaris-Button--variantPrimary_1stsb){
  --pc-button-box-shadow:var(--p-shadow-button-primary-critical);
  --pc-button-box-shadow_active:var(--p-shadow-button-primary-critical-inset);
  --pc-button-bg:var(--p-color-bg-fill-critical);
  --pc-button-bg_hover:var(--p-color-bg-fill-critical-hover);
  --pc-button-bg_active:var(--p-color-bg-fill-critical-active);
  --pc-button-bg_pressed:var(--p-color-bg-fill-critical-selected);
}

.Polaris-Button--sizeMicro_pq72j{
  --pc-button-padding-block:var(--p-space-100);
  --pc-button-padding-inline:var(--p-space-200);
  min-height:var(--p-height-700);
  min-width:var(--p-width-700);
}

@media (min-width: 48em){

.Polaris-Button--sizeMicro_pq72j{
    min-height:var(--p-height-600);
    min-width:var(--p-width-600);
}
  }

.Polaris-Button--sizeSlim_1p6ue,
.Polaris-Button--sizeMedium_5f35p{
  --pc-button-padding-block:var(--p-space-150);
  --pc-button-padding-inline:var(--p-space-300);
  min-height:var(--p-height-800);
  min-width:var(--p-width-800);
}

@media (min-width: 48em){

.Polaris-Button--sizeSlim_1p6ue,
.Polaris-Button--sizeMedium_5f35p{
    min-height:var(--p-height-700);
    min-width:var(--p-width-700);
}
  }

.Polaris-Button--sizeLarge_61dxo{
  --pc-button-padding-block:var(--p-space-150);
  --pc-button-padding-inline:var(--p-space-300);
  min-height:var(--p-height-900);
  min-width:var(--p-height-900);
}

@media (min-width: 48em){

.Polaris-Button--sizeLarge_61dxo{
    min-height:var(--p-height-800);
    min-width:var(--p-width-800);
}
  }

.Polaris-Button--textAlignCenter_1kere{
  justify-content:center;
  text-align:center;
}

.Polaris-Button--textAlignStart_5hw7p,
.Polaris-Button--textAlignLeft_1yjwh{
  justify-content:start;
  text-align:start;
}

.Polaris-Button--textAlignEnd_1ea3w,
.Polaris-Button--textAlignRight_1nn4o{
  justify-content:end;
  text-align:end;
}

.Polaris-Button--fullWidth_zyvh4{
  width:100%;
}

.Polaris-Button--iconOnly_viazp{
  --pc-button-padding-block:var(--p-space-100);
  --pc-button-padding-inline:var(--p-space-100);
}

.Polaris-Button--iconOnly_viazp:is(.Polaris-Button--sizeLarge_61dxo){
  --pc-button-padding-block:var(--p-space-150);
  --pc-button-padding-inline:var(--p-space-150);
}

.Polaris-Button--iconOnly_viazp:is(.Polaris-Button--sizeMicro_pq72j){
  --pc-button-padding-block:var(--p-space-050);
  --pc-button-padding-inline:var(--p-space-050);
}

.Polaris-Button--iconOnly_viazp:is(.Polaris-Button--variantTertiary_ibcmv){
  margin:calc(var(--pc-button-padding-block)*-1) calc(var(--pc-button-padding-inline)*-1);
}

.Polaris-Button--iconOnly_viazp:is(.Polaris-Button--variantTertiary_ibcmv, .Polaris-Button--variantPlain_1bx18):not(.Polaris-Button--toneCritical_jv6uf){
  --pc-button-icon-fill:var(--p-color-icon-secondary);
  --pc-button-icon-fill_hover:var(--p-color-icon-secondary-hover);
  --pc-button-icon-fill_active:var(--p-color-icon-secondary-active);
  --pc-button-icon-fill_disabled:var(--p-color-icon-disabled);
}

.Polaris-Button--iconOnly_viazp:is(.Polaris-Button--variantMonochromePlain_55h85){
  --pc-button-icon-fill:currentColor;
  --pc-button-icon-fill_hover:var(--p-color-icon-secondary-hover);
  --pc-button-icon-fill_active:var(--p-color-icon-secondary-active);
  --pc-button-icon-fill_disabled:var(--p-color-icon-disabled);
}

.Polaris-Button--iconOnly_viazp:is(.Polaris-Button--variantPlain_1bx18, .Polaris-Button--variantMonochromePlain_55h85){
  --pc-button-padding-block:0;
  --pc-button-padding-inline:0;
  margin:0;
  min-height:var(--p-height-500);
  min-width:var(--p-width-500);
}

.Polaris-Button--iconWithText_dhbvn:not(.Polaris-Button--variantPlain_1bx18, .Polaris-Button--variantMonochromePlain_55h85){
  padding-left:calc(var(--pc-button-padding-inline)*0.5);
}

.Polaris-Button--disclosure_yr3no:not(.Polaris-Button--variantPlain_1bx18, .Polaris-Button--variantMonochromePlain_55h85){
  padding-right:calc(var(--pc-button-padding-inline)*0.5);
}

.Polaris-Button--disclosure_yr3no:is(.Polaris-Button--textAlignStart_5hw7p, .Polaris-Button--textAlignLeft_1yjwh){
  justify-content:space-between;
}

.Polaris-Button--loading_1brcv{
  color:transparent;
}

.Polaris-Button--pressable_1q8ey:active:not(.Polaris-Button--variantTertiary_ibcmv, .Polaris-Button--variantPlain_1bx18, .Polaris-Button--variantMonochromePlain_55h85)
  > *{
  transform:translate3d(0, 0.0625rem, 0);
}

.Polaris-Button--hidden_riqie{
  visibility:hidden;
}

.Polaris-Button__Icon_yj27d{
  margin:calc(var(--p-space-050)*-1) 0;
}

.Polaris-Button__Spinner_mzr5w{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.Polaris-Button__Spinner_mzr5w svg{
    fill:var(--pc-button-icon-fill_disabled);
    vertical-align:middle;
  }

[data-buttongroup-variant='segmented']
  > *:not(:first-child)
  .Polaris-Button_r99lw:is(.Polaris-Button--variantPrimary_1stsb){
  margin-left:calc(var(--p-space-025)*-1);
}

[data-buttongroup-variant='segmented'] > *:not(:first-child) .Polaris-Button_r99lw{
  border-top-left-radius:var(--p-border-radius-0);
  border-bottom-left-radius:var(--p-border-radius-0);
}

[data-buttongroup-variant='segmented'] > *:not(:last-child) .Polaris-Button_r99lw{
  border-top-right-radius:var(--p-border-radius-0);
  border-bottom-right-radius:var(--p-border-radius-0);
}

[data-buttongroup-full-width='true'] .Polaris-Button_r99lw{
  width:100%;
}

@media (min-width: 48em){

[data-buttongroup-full-width='true'] .Polaris-Button_r99lw{
    white-space:nowrap;
}
  }

[data-buttongroup-connected-top='true'] > *:first-child .Polaris-Button_r99lw{
  border-top-left-radius:var(--p-border-radius-0);
}

[data-buttongroup-connected-top='true'] > *:last-child .Polaris-Button_r99lw{
  border-top-right-radius:var(--p-border-radius-0);
}