@itwin/itwinui-css/css/button.css

CSS library for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications.

/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
.iui-button{vertical-align:baseline;vertical-align:middle;border-radius:var(--iui-border-radius-1);font-family:inherit;line-height:1.2;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);-webkit-user-select:none;user-select:none;cursor:pointer;white-space:nowrap;border:none;border:1px solid var(--_iui-button-border-color);background:var(--_iui-button-background-color);color:var(--_iui-button-text-color);justify-content:center;align-items:center;gap:var(--_iui-button-gap);min-block-size:var(--_iui-button-min-height);min-inline-size:var(--_iui-button-min-height);padding:0;padding-block:var(--_iui-button-padding-block);padding-inline:var(--_iui-button-padding-inline);transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out;-webkit-tap-highlight-color:transparent;--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:var(--iui-color-background);--_iui-button-border-color:var(--iui-color-border-foreground);--_iui-button-icon-fill:var(--iui-color-icon);flex-shrink:0;margin:0;text-decoration:none;display:inline-flex;position:relative}.iui-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}.iui-button:hover,.iui-button:active{--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-hover);--_iui-button-border-color:var(--iui-color-border-foreground-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}.iui-button:focus{outline-offset:-2px;outline-width:2px}.iui-button:is([disabled],:disabled,[aria-disabled=true],[data-iui-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:var(--iui-color-background-disabled);--_iui-button-border-color:var(--iui-color-border-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled);cursor:not-allowed;outline-offset:-1px;outline-width:1px;outline-color:var(--iui-color-text-accent)}.iui-button[data-iui-size=small]{--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small)}.iui-button[data-iui-size=large]{font-size:var(--iui-font-size-2);--_iui-button-gap:var(--iui-size-s);--_iui-button-padding-block:var(--iui-size-xs);--_iui-button-padding-inline:var(--iui-size-l);--_iui-button-min-height:var(--iui-component-height-large)}.iui-button[data-iui-variant=borderless]{--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon);--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-padding-inline:var(--iui-size-xs)}.iui-button[data-iui-variant=borderless]:where(:hover,:active){--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-transparent-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}.iui-button[data-iui-variant=borderless]:where(:focus){outline-offset:-1px;outline-width:1px}.iui-button[data-iui-variant=borderless]:where([disabled],:disabled,[aria-disabled=true],[data-iui-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon-disabled)}.iui-button[data-iui-variant=borderless][data-iui-shift=left]{margin-inline-start:calc(-1*var(--_iui-button-padding-inline))}.iui-button[data-iui-variant=borderless][data-iui-shift=right]{margin-inline-end:calc(-1*var(--_iui-button-padding-inline))}.iui-button[data-iui-variant=borderless][data-iui-size=small]{--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);--_iui-button-padding-inline:var(--iui-size-2xs)}.iui-button[data-iui-variant=borderless][data-iui-size=large]{font-size:var(--iui-font-size-2);--_iui-button-gap:var(--iui-size-s);--_iui-button-padding-block:var(--iui-size-xs);--_iui-button-padding-inline:var(--iui-size-l);--_iui-button-min-height:var(--iui-component-height-large);--_iui-button-padding-inline:var(--iui-size-s)}.iui-button[data-iui-active=true]{--_iui-button-active-stripe-inset-block:initial;--_iui-button-active-stripe-inset-inline:initial;--_iui-button-active-stripe-background:var(--iui-color-border-accent);--_iui-button-text-color:var(--iui-color-text-accent);--_iui-button-icon-fill:var(--iui-color-icon-accent);--_iui-button-background-color:var(--iui-color-background-accent-muted)}.iui-button[data-iui-active=true]:after{content:"";inset-block:var(--_iui-button-active-stripe-inset-block);inset-inline:var(--_iui-button-active-stripe-inset-inline);background:var(--_iui-button-active-stripe-background);position:absolute}.iui-button[data-iui-active=true]:is([disabled],:disabled,[aria-disabled=true],[data-iui-disabled=true]){--_iui-button-active-stripe-background:var(--iui-color-icon-disabled);--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled)}.iui-button[data-iui-active=true][data-iui-variant=borderless]{--_iui-button-background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6))}.iui-button[data-iui-active=true]:is([disabled],:disabled,[aria-disabled=true],[data-iui-disabled=true]){--_iui-button-background-color:var(--iui-color-background-disabled)}.iui-button[data-iui-variant=high-visibility]{--_iui-button-background-color:var(--iui-color-background-accent);--_iui-button-text-color:var(--iui-color-white);--_iui-button-border-color:var(--_iui-button-background-color);--_iui-button-icon-fill:var(--iui-color-white)}.iui-button[data-iui-variant=high-visibility]:hover,.iui-button[data-iui-variant=high-visibility]:active{--_iui-button-background-color:var(--iui-color-background-accent-hover)}.iui-button[data-iui-variant=high-visibility]:focus{outline-color:var(--iui-color-white);outline-offset:-3px;outline-width:1px}.iui-button[data-iui-variant=high-visibility]:is([disabled],:disabled,[aria-disabled=true],[data-iui-disabled=true]){--_iui-button-background-color:var(--iui-color-background-disabled);--_iui-button-border-color:var(--iui-color-border-disabled);--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled);outline-offset:-1px;outline-width:1px;outline-color:var(--iui-color-text-accent)}.iui-button[data-iui-variant=cta]{--_iui-button-background-color:var(--iui-color-background-positive);--_iui-button-text-color:var(--iui-color-white);--_iui-button-border-color:var(--_iui-button-background-color);--_iui-button-icon-fill:var(--iui-color-white)}.iui-button[data-iui-variant=cta]:hover,.iui-button[data-iui-variant=cta]:active{--_iui-button-background-color:var(--iui-color-background-positive-hover)}.iui-button[data-iui-variant=cta]:focus{outline-color:var(--iui-color-white);outline-offset:-3px;outline-width:1px}.iui-button[data-iui-variant=cta]:is([disabled],:disabled,[aria-disabled=true],[data-iui-disabled=true]){--_iui-button-background-color:var(--iui-color-background-disabled);--_iui-button-border-color:var(--iui-color-border-disabled);--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled);outline-offset:-1px;outline-width:1px;outline-color:var(--iui-color-text-accent)}.iui-button[data-iui-variant=idea]{--_iui-button-background-color:var(--iui-color-background-accent);--_iui-button-text-color:var(--iui-color-white);--_iui-button-border-color:var(--_iui-button-background-color);--_iui-button-icon-fill:var(--iui-color-white);border-radius:var(--iui-border-radius-round);box-shadow:var(--iui-shadow-5);position:fixed;inset-block-end:var(--iui-size-s);inset-inline-end:var(--iui-size-m)}.iui-button[data-iui-variant=idea]:hover,.iui-button[data-iui-variant=idea]:active{--_iui-button-background-color:var(--iui-color-background-accent-hover)}.iui-button[data-iui-variant=idea]:focus{outline-color:var(--iui-color-white);outline-offset:-3px;outline-width:1px}.iui-button[data-iui-variant=idea]:is([disabled],:disabled,[aria-disabled=true],[data-iui-disabled=true]){--_iui-button-background-color:var(--iui-color-background-disabled);--_iui-button-border-color:var(--iui-color-border-disabled);--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled);outline-offset:-1px;outline-width:1px;outline-color:var(--iui-color-text-accent)}.iui-button-icon{display:inline-flex}.iui-button-icon svg{inline-size:var(--iui-size-m);block-size:var(--iui-size-m);transition:fill var(--iui-duration-1)ease-out;fill:var(--_iui-button-icon-fill,currentColor);flex-shrink:0;display:flex}.iui-button-dropdown{padding-inline-end:calc(var(--iui-size-xs) - 1px)}.iui-button-dropdown[data-iui-size=small]{padding-inline-end:calc(var(--iui-size-2xs) - 1px)}.iui-button-dropdown[data-iui-size=large]{padding-inline-end:calc(var(--iui-size-s) - 1px)}.iui-button-split{isolation:isolate;align-items:center;display:inline-flex}.iui-button-split :where(.iui-button:first-child){border-start-end-radius:0;border-end-end-radius:0}.iui-button-split :where(.iui-button:first-child)[data-iui-variant=high-visibility],.iui-button-split :where(.iui-button:first-child)[data-iui-variant=cta]{border-inline-end-color:rgba(255,255,255,var(--iui-opacity-4))}.iui-button-split :where(.iui-button:first-child):hover{z-index:1}.iui-button-split :where(.iui-button:first-child):is([disabled],:disabled,[aria-disabled=true],[data-iui-disabled=true]){border-inline-end-color:var(--iui-color-border-subtle);z-index:-1}.iui-button-split :where(.iui-button:last-child){--_iui-button-padding-inline:var(--iui-size-2xs);min-inline-size:unset;border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:-1px}.iui-button-split :where(.iui-button:last-child)[data-iui-variant=high-visibility],.iui-button-split :where(.iui-button:last-child)[data-iui-variant=cta]{border-inline-start-color:rgba(255,255,255,var(--iui-opacity-4))}.iui-button-split :where(.iui-button:last-child):where([disabled],:disabled,[aria-disabled=true],[data-iui-disabled=true]){border-inline-start-color:var(--iui-color-border-subtle);z-index:-1}.iui-button-split :where(.iui-button:last-child)[data-iui-size=small]{--_iui-button-padding-inline:var(--iui-size-3xs)}.iui-button-split :where(.iui-button:last-child)[data-iui-size=large]{--_iui-button-padding-inline:var(--iui-size-xs)}.iui-button-group:where(:not([data-iui-orientation=vertical])){isolation:isolate;pointer-events:none;align-items:center;display:inline-flex}.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]{pointer-events:all;position:relative}.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container,.iui-button,.iui-input){--_iui-button-active-stripe-inset-block:var(--iui-size-3xs)calc(100% - var(--iui-size-2xs));--_iui-button-active-stripe-inset-inline:var(--iui-size-3xs)}.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):hover{z-index:1}.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):is(.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):where(:disabled,.iui-disabled,[aria-disabled=true])){z-index:-1}.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):focus,.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):focus:where([aria-disabled=true]),.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):focus-within,.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):focus-within:where([aria-disabled=true]){z-index:2}.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container,.iui-input,.iui-button:where(:not([data-iui-variant=borderless]))),.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container):before{border-radius:0;transition-duration:0s}.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container,.iui-input,.iui-button:where(:not([data-iui-variant=borderless]))):hover,.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container,.iui-input,.iui-button:where(:not([data-iui-variant=borderless]))):focus,.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container):before:hover,.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(.iui-input-flex-container):before:focus{transition-duration:var(--iui-duration-1)}.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(:first-child):where(.iui-input-flex-container,.iui-input,.iui-button:where(:not([data-iui-variant=borderless]))),.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(:first-child):where(.iui-input-flex-container):before{border-start-start-radius:var(--iui-border-radius-1);border-end-start-radius:var(--iui-border-radius-1)}.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(:last-child):where(.iui-input-flex-container,.iui-input,.iui-button:where(:not([data-iui-variant=borderless]))),.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(:last-child):where(.iui-input-flex-container):before{border-start-end-radius:var(--iui-border-radius-1);border-end-end-radius:var(--iui-border-radius-1)}.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]+*{margin-inline-start:-1px}.iui-button-group:where(:not([data-iui-orientation=vertical]))>[class]:where(:not(:first-child):not([data-iui-variant=borderless])):where(:disabled,.iui-disabled,[aria-disabled=true]){border-inline-start-color:var(--iui-color-border-subtle)}.iui-button-group:where([data-iui-orientation=vertical]){isolation:isolate;pointer-events:none;flex-direction:column;align-items:center;max-block-size:100%;display:inline-flex}.iui-button-group:where([data-iui-orientation=vertical])>[class]{pointer-events:all;position:relative}.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container,.iui-button,.iui-input){--_iui-button-active-stripe-inset-block:var(--iui-size-3xs);--_iui-button-active-stripe-inset-inline:var(--iui-size-3xs)calc(100% - var(--iui-size-2xs))}.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):hover{z-index:1}.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):is(.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):where(:disabled,.iui-disabled,[aria-disabled=true])){z-index:-1}.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):focus,.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):focus:where([aria-disabled=true]),.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):focus-within,.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container,.iui-button,.iui-input):focus-within:where([aria-disabled=true]){z-index:2}.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container,.iui-input,.iui-button:where(:not([data-iui-variant=borderless]))),.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container):before{border-radius:0;transition-duration:0s}.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container,.iui-input,.iui-button:where(:not([data-iui-variant=borderless]))):hover,.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container,.iui-input,.iui-button:where(:not([data-iui-variant=borderless]))):focus,.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container):before:hover,.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(.iui-input-flex-container):before:focus{transition-duration:var(--iui-duration-1)}.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(:first-child):where(.iui-input-flex-container,.iui-input,.iui-button:where(:not([data-iui-variant=borderless]))),.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(:first-child):where(.iui-input-flex-container):before{border-start-start-radius:var(--iui-border-radius-1);border-start-end-radius:var(--iui-border-radius-1)}.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(:last-child):where(.iui-input-flex-container,.iui-input,.iui-button:where(:not([data-iui-variant=borderless]))),.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(:last-child):where(.iui-input-flex-container):before{border-end-end-radius:var(--iui-border-radius-1);border-end-start-radius:var(--iui-border-radius-1)}.iui-button-group:where([data-iui-orientation=vertical])>[class]+*{margin-block-start:-1px}.iui-button-group:where([data-iui-orientation=vertical])>[class]:where(:not(:first-child):not([data-iui-variant=borderless])):where(:disabled,.iui-disabled,[aria-disabled=true]){border-block-start-color:var(--iui-color-border-subtle)}.iui-button-group-overflow-x{inline-size:100%}