Button Sass API

Variables

button-disable-everything

$button-disable-everything: false !default;

button-disable-text

$button-disable-text: false !default;

Used By

• @mixin button-variables
• $button-styles

button-disable-icon

$button-disable-icon: false !default;

button-disable-icon-square

$button-disable-icon-square: false !default;

Used By

• $button-styles

button-disable-contained

$button-disable-contained: false !default;

Used By

• @mixin button-variables
• $button-styles

button-disable-contained-pressed-elevation

$button-disable-contained-pressed-elevation: false !default;

Used By

• $button-styles

button-disable-contained-interaction-colors

$button-disable-contained-interaction-colors: interaction.$light-surface-base-background-color
  == interaction.$dark-surface-base-background-color !default;

Used By

• $button-styles

button-disable-floating

$button-disable-floating: false !default;

Used By

• @mixin button-variables
• $button-styles
• @mixin label-variables
• @mixin label-styles
• @mixin text-field-container-styles

button-disable-floating-absolute-position

$button-disable-floating-absolute-position: false !default;

Used By

• $button-styles

button-disable-circular-progress

$button-disable-circular-progress: progress.$disable-circular !default;

button-disable-async

$button-disable-async: $disable-circular-progress !default;

Used By

• $button-styles

button-disable-unstyled-utility-class

$button-disable-unstyled-utility-class: false !default;

Used By

• $button-styles
• @mixin expansion-panel-styles

button-text-border-radius

$button-text-border-radius: border-radius.get-var(sm) !default;

Used By

• @mixin button-text-styles

button-text-horizontal-padding

$button-text-horizontal-padding: spacing.get-var(md) !default;

Used By

• @mixin button-variables
• @mixin snackbar-styles

button-text-vertical-padding

$button-text-vertical-padding: spacing.get-var(none) !default;

Used By

• @mixin button-variables

button-text-min-height

$button-text-min-height: 2.25rem !default;

Used By

• @mixin button-variables

button-text-min-width

$button-text-min-width: 4rem !default;

Used By

• @mixin button-variables

button-text-icon-size

$button-text-icon-size: 1.125rem !default;

Used By

• @mixin button-text-styles

button-icon-border-radius

$button-icon-border-radius: border-radius.get-var(full) !default;

Used By

• $button-styles

button-icon-square-border-radius

$button-icon-square-border-radius: $text-border-radius !default;

button-icon-size

$button-icon-size: auto !default;

Used By

• @mixin button-variables
• @mixin chip-styles
• @mixin switch-styles

button-icon-small-size

$button-icon-small-size: icon.$size - 0.25rem !default;

Used By

• $button-styles

button-icon-large-size

$button-icon-large-size: icon.$size + 0.25rem !default;

Used By

• $button-styles

button-icon-font-size

$button-icon-font-size: icon.$size !default;

Used By

• @mixin button-variables

button-icon-padding

$button-icon-padding: 0.5em !default;

Used By

• @mixin button-variables

button-contained-elevation

$button-contained-elevation: 2 !default;

Used By

• $button-styles

button-contained-pressed-elevation

$button-contained-pressed-elevation: 4 !default;

Used By

• $button-styles

button-clear-contained-background-color

$button-clear-contained-background-color: theme.$light-theme-surface-color !default;

Used By

• @mixin button-variables

button-clear-contained-color

$button-clear-contained-color: a11y.contrast-color(
  $clear-contained-background-color
) !default;

Used By

• @mixin button-variables

button-circular-progress-size

$button-circular-progress-size: icon.get-var(size) !default;

button-floating-margin

$button-floating-margin: spacing.get-var(lg) !default;

button-floating-z-index

$button-floating-z-index: utils.$temporary-element-z-index !default;

Used By

• $button-styles

button-floating-absolute-z-index

$button-floating-absolute-z-index: 5 !default;

Used By

• $button-styles

button-floating-positions

$button-floating-positions: (
  tl: (
    left: $floating-margin,
    top: $floating-margin,
  ),
  tr: (
    right: $floating-margin,
    top: $floating-margin,
  ),
  bl: (
    bottom: $floating-margin,
    left: $floating-margin,
  ),
  br: (
    bottom: $floating-margin,
    right: $floating-margin,
  ),
) !default;

Used By

• $button-styles

button-variables

$button-variables: (
  background-color,
  color,
  border-radius,
  contained-background-color,
  contained-color,
  text-horizontal-padding,
  text-vertical-padding,
  text-min-height,
  text-min-width,
  text-border-radius,
  icon-size,
  icon-padding,
  icon-font-size,
  icon-border-radius,
  icon-square-border-radius,
  fab-offset
);

Mixins

button-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

button-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

button-unstyled

@mixin unstyled($hoverable: false, $css-modules: false, $box-shadow: interaction.$focus-box-shadow) { … }

Examples

Example SCSS Usage

@use "@react-md/core";

.button {
  @include core.button-unstyled($hoverable: true, $css-modules: false);
}

Used By

• $button-styles

button-text-styles

@mixin text-styles { … }

Examples

Example SCSS Usage

@use "@react-md/core";

.button {
  @include core.button-text-styles;

  align-items: center;
  border-width: 0;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
}

Used By

• $button-styles

Requires

• @mixin app-bar-use-var
• @function app-bar-get-var
• $button-text-icon-size
• $button-styles
• $button-text-border-radius

button-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• @function scrollbar-size
• $app-bar-disable-everything
• $button-disable-contained
• $button-clear-contained-background-color
• $button-clear-contained-color
• $button-disable-text
• $button-text-horizontal-padding
• $button-text-vertical-padding
• $button-text-min-height
• $button-text-min-width
• $avatar-disable-icon
• $button-icon-size
• $button-icon-font-size
• $button-icon-padding
• $button-disable-floating

button-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin app-bar-use-var
• @mixin button-text-styles
• @mixin app-bar-set-var
• @mixin button-unstyled
• @function app-bar-get-var
• $app-bar-disable-everything
• $autocomplete-disable-circular-progress
• $autocomplete-circular-progress-size
• $button-disable-text
• $avatar-disable-icon
• $button-icon-border-radius
• $button-disable-icon-square
• $button-icon-small-size
• $button-icon-large-size
• $button-disable-contained
• $button-disable-contained-interaction-colors
• $button-contained-elevation
• $button-disable-contained-pressed-elevation
• $button-contained-pressed-elevation
• $button-disable-async
• $button-disable-unstyled-utility-class
• $button-disable-floating
• $button-floating-z-index
• $button-disable-floating-absolute-position
• $button-floating-absolute-z-index
• $button-floating-positions

Functions

button-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

Set to true to disable all the styles

Set to true to disable the text button styles

Set to true to disable the icon button styles

Set to true to disable the icon-square button styles

Set to true to disable the contained button styles

Set to true to disable the contained with pressed elevation button styles

Contained buttons should normally always force dark background colors for the interaction states This means use the default light theme since it is based off of the root background color.

Set to true to disable the floating button styles

Set to true to disable the floating button position: absolute styles

Set to true to disable updating the circular progress size within buttons

Set to true to disable the async button styles

Set to true to disable .rmd-button-unstyled utility class

The default border radius to apply to text buttons

The default horizontal padding to apply to text buttons

The default vertical padding to apply to text buttons

The default min-height to apply to text buttons

The default min-width to apply to text buttons

The default size to set icons that appear as children of text buttons

The default border radius to apply to icon buttons

The default border radius to apply to square icon buttons

The default height and width of icon buttons. This default value makes them responsive based on the current font size.

The default icon button small size

The default icon button large size

The default icon button font size which is used to update the total size of the button as well.

The default padding for icon buttons. The icon button size is determined by adding the padding to the icon size.

The default material design elevation for the contained button theme. This should be a number from 0 - 24.

The default material design elevation for the contained button theme while pressed. This should be a number from 0 - 24.

The default background color to apply to contained buttons while the theme is set to clear

The default text color to apply to contained buttons while the theme is set to clear

The default size for circular progress components that appear as a child of a text button

The default viewport margin for a floating action button

The default z-index for a floating action button

The default z-index for an absolute positioned floating action button. This should be a number lower than the $app-bar-fixed-z-index.

The default floating action button positions and their margin styles.

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

Used to create button that does not have the default browser button styles

Pass-through to interaction.surface($hoverable)

Pass-through to interaction.surface($css-modules)

Pass-through to interaction.surface($box-shadow)

Used to apply the text button styles to an element and most likely an internal only mixin.

Conditionally applies the css variables based on feature flags

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value