Skip to main content
react-md
react-md - Button - SassDoc

Variables

rmd-button-text-icon-inherit-color

Boolean

Boolean if text buttons with icons should have the icons inherit the current color. If this is disabled, only icon buttons will inherit the current text color.

$rmd-button-text-icon-inherit-color: true !default;

rmd-button-text-border-radius

Number

The border radius to apply to text buttons.

$rmd-button-text-border-radius: 0.5rem !default;

rmd-button-text-horizontal-padding

Number

The amount of left and right padding to apply to text buttons.

$rmd-button-text-horizontal-padding: 1rem !default;

rmd-button-text-vertical-padding

Number

The amount of top and bottom padding to apply to text buttons. Since buttons are now displayed as inline-flex, it is generally recommended to keep this value at 0 and just increase the height of the button instead.

$rmd-button-text-vertical-padding: 0 !default;

rmd-button-text-height

Number

The height for text buttons.

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

rmd-button-text-min-width

Number

The min width for text buttons.

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

rmd-button-text-icon-size

Number

The text button's icon size. This is smaller than the normal icon size by default since buttons have additional padding. You can set this to null if you want consistent icon sizes.

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

rmd-button-icon-border-radius

Number

The border radius to apply to all icon buttons.

$rmd-button-icon-border-radius: 50% !default;

rmd-button-icon-size

Number

The height and width to apply to an icon button.

$rmd-button-icon-size: 3rem !default;

rmd-button-outline-width

Number

The base box-shadow width to apply to buttons

$rmd-button-outline-width: 1px !default;

rmd-button-box-shadow

String

The base box-shadow to apply to buttons when outlined. This will normally be used along with a color variable to define a box shadow.

$rmd-button-box-shadow: inset 0 0 0 !default;

rmd-button-outline-color

Color

This is the color that will be applied to the box-shadow/border for the button when the outline theme type is applied unless one of the theme values are defined.

$rmd-button-outline-color: #999 !default;

rmd-button-background-color

Color

This is the background color that will be applied when the theme type prop on buttons is set to "clear".

$rmd-button-background-color: transparent !default;

rmd-button-color

Color

This is the text color that will be applied when the theme type prop on buttons is set to "clear".

$rmd-button-color: rmd-theme-var(text-primary-on-background) !default;

rmd-button-contained-elevation-transition-time

Number

The transition time for a contained button to raise to the pressed elevation.

$rmd-button-contained-elevation-transition-time: 0.15s !default;

rmd-button-contained-resting-elevation

Number

The elevation to use for a resting contained button. This should be a number between 0 and 24.

$rmd-button-contained-resting-elevation: 2 !default;

rmd-button-contained-pressed-elevation

Number

The elevation to use for a contained button that is being pressed. This should be a number between 0 and 24.

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

rmd-button-floating-z-index

Number

The z-index to use for the floating action button.

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

rmd-button-floating-margin

Number

The default page margin to use for the floating action button positions.

$rmd-button-floating-margin: 1.5rem !default;

rmd-button-circular-progress-size

Since v2.3.0

String|Number

The size to use for a CircularProgress that exists as a child of the Button. The styles will only be created if this value is not null, the @react-md/progress package has been installed, and the @react-md/progress's mixins have been imported in the same file as the @react-md/button's mixins.

$rmd-button-circular-progress-size: rmd-icon-theme-var(size) !default;

Examples

Includes `CircularProgress` size
@use "react-md" as *;

@import '@react-md/button/dist/scss/mixins';
@import '@react-md/progress/dist/scss/mixins';
@import '@react-md/utils/dist/scss/mixins';

// can also manually set it to a different value if desired:
// $rmd-button-circular-progress-size: 1.5rem;

// or @include react-md-button;
@include react-md-utils;
Does not include `CircularProgress` size
@use "react-md" as *;

// bad example since `@react-md/progress` was not imported
@import '@react-md/button/dist/scss/mixins';
@import '@react-md/utils/dist/scss/mixins';

// or @include react-md-button;
@include react-md-utils;
Opt-out of `CircularProgress` size
@use "react-md" as *;

@import '@react-md/button/dist/scss/mixins';
@import '@react-md/progress/dist/scss/mixins';
@import '@react-md/utils/dist/scss/mixins';

// manually set it to `null` to prevent it from being added
$rmd-button-circular-progress-size: null;

// or @include react-md-button;
@include react-md-utils;

rmd-button-floating-positions

Map

A Map of floating position styles to create. Each key will be made into a className by &--floating-#{$key} and each value will parsed as a style map. If you want to remove positions, override this variable with only the required styles.

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

rmd-button-theme-values

Map

A Map of all the "themeable" parts of the button package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.

$rmd-button-theme-values: (
  text-border-radius: $rmd-button-text-border-radius,
  text-horizontal-padding: $rmd-button-text-horizontal-padding,
  text-vertical-padding: $rmd-button-text-vertical-padding,
  text-height: $rmd-button-text-height,
  text-min-width: $rmd-button-text-min-width,
  icon-border-radius: $rmd-button-icon-border-radius,
  icon-size: $rmd-button-icon-size,
  background-color: $rmd-button-background-color,
  color: $rmd-button-color,
  outline: $rmd-button-outline-color,
  outline-width: $rmd-button-outline-width,
) !default;

Mixins

rmd-button-theme

mixin

Creates the styles for one of the button's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-button-theme-values value to.

String
$theme-style

One of the keys of rmd-button-theme-values to extract a value from.

String
$fallback

A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the rmd-button-theme-values map when null.

Color|String|Numbernull

rmd-button-theme-update-var

mixin

Updates one of the button's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The button theme style type to update. This should be one of the $rmd-button-theme-values keys.

String
$value

The new value to use.

Color|String|Number

rmd-button-reset

mixin

A simple mixin to remove most of the styles for a button and reset them to be clear.

NOTE: An reset button removed the outline-style so you must add a custom focus behavior with either ripples or something else for keyboard users.

Examples

Example Usage SCSS
@use "react-md" as *;

.my-button {
  @include rmd-button-reset;
  @include rmd-typography(button);

  display: inline-flex;
}

rmd-button-base

mixin

The base styles for a button.

Examples

Example Usage SCSS
@use "react-md" as *;

.my-button {
  @include rmd-button-base;
}

rmd-button-text

mixin

Creates the base styles for a text button.

rmd-button-icon

mixin

Creates the base styles for an icon button.

rmd-button

mixin

Creates all the styles for a button. This should be used within a class or selector.

rmd-button-unstyled

mixin

Creates all the styles for an unstyled button.

Parameters
NameDescriptionTypeDefault Value
$css-modules

Boolean if this is being used within CSS Modules which will update the selector to work correctly by wrapping different parts with :global and :local.

Booleanfalse

rmd-button-floating-positions

mixin

Creates the styles for all the floating button positions.

rmd-fab

mixin

Creates the styles for the floating action button container. FAB

react-md-button

mixin

Creates all the styles for this package as well as defining all the theme CSS variables.

Functions

rmd-button-theme

function

This function is used to quickly get one of the button's theme values. This is really just for the rmd-button-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.

Returns — Color|String|Number

one of the button's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-button-theme-values map keys to get a value for.

String

rmd-button-theme-var

function

This function is used to get one of the button's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-button-theme-values

This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.

Returns — String

one of the button's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-button-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull