Button Sass API

Variables

button-disable-everything

$button-disable-everything: false !default;

Set to true to disable all the styles

button-disable-text

$button-disable-text: false !default;

Set to true to disable the text button styles

Used By

• @mixin button-variables
• $button-styles

button-disable-icon

$button-disable-icon: false !default;

Set to true to disable the icon button styles

button-disable-icon-square

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

Set to true to disable the icon-square button styles

Used By

• @mixin button-variables
• $button-styles

button-disable-contained

$button-disable-contained: false !default;

Set to true to disable the contained button styles

Used By

• @mixin button-variables
• $button-styles

button-disable-contained-pressed-elevation

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

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

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;

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.

Used By

• $button-styles

button-disable-floating

$button-disable-floating: false !default;

Set to true to disable the floating button styles

Used By

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

button-disable-floating-absolute-position

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

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

Used By

• $button-styles

button-disable-circular-progress

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

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

button-disable-async

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

Set to true to disable the async button styles

Used By

• $button-styles

button-disable-unstyled-utility-class

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

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

Used By

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

button-text-border-radius

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

The default border radius to apply to text buttons

Used By

• @mixin button-text-styles

button-text-horizontal-padding

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

The default horizontal padding to apply to text buttons

Used By

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

button-text-vertical-padding

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

The default vertical padding to apply to text buttons

Used By

• @mixin button-variables

button-text-min-height

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

The default min-height to apply to text buttons

Used By

• @mixin button-variables

button-text-min-width

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

The default min-width to apply to text buttons

Used By

• @mixin button-variables

button-text-icon-size

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

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

Used By

• @mixin button-text-styles

button-icon-border-radius

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

The default border radius to apply to icon buttons

Used By

• $button-styles

button-icon-square-border-radius

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

The default border radius to apply to square icon buttons

Used By

• @mixin button-variables

button-icon-size

$button-icon-size: auto !default;

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

Used By

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

button-icon-small-size

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

The default icon button small size

Used By

• $button-styles

button-icon-large-size

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

The default icon button large size

Used By

• $button-styles

button-icon-font-size

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

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

Used By

• @mixin button-variables

button-icon-padding

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

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

Used By

• @mixin button-variables

button-contained-elevation

$button-contained-elevation: 2 !default;

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

Used By

• $button-styles

button-contained-pressed-elevation

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

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

Used By

• $button-styles

button-clear-contained-background-color

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

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

Used By

• @mixin button-variables

button-clear-contained-color

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

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

Used By

• @mixin button-variables

button-circular-progress-size

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

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

button-floating-margin

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

The default viewport margin for a floating action button

button-floating-z-index

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

The default z-index for a floating action button

Used By

• $button-styles

button-floating-absolute-z-index

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

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

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;

The default floating action button positions and their margin styles.

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
);

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

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) { … }

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

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 { … }

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

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 { … }

Conditionally applies the css variables based on feature flags

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-icon-square
• $button-icon-square-border-radius
• $button-disable-floating

button-styles

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

Generates all the styles based on feature flags.

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-pressed-elevation
• $button-contained-pressed-elevation
• $button-disable-contained-interaction-colors
• $button-contained-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

a var() statement

Requires

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