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;The border radius to apply to text buttons.
$rmd-button-text-border-radius: 0.5rem !default;The amount of left and right padding to apply to text buttons.
$rmd-button-text-horizontal-padding: 1rem !default;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;The height for text buttons.
$rmd-button-text-height: 2.25rem !default;The min width for text buttons.
$rmd-button-text-min-width: 4rem !default;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;The border radius to apply to all icon buttons.
$rmd-button-icon-border-radius: 50% !default;The height and width to apply to an icon button.
$rmd-button-icon-size: 3rem !default;The base box-shadow width to apply to buttons
$rmd-button-outline-width: 1px !default;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;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;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;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;The transition time for a contained button to raise to the pressed elevation.
$rmd-button-contained-elevation-transition-time: 0.15s !default;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;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;The z-index to use for the floating action button.
$rmd-button-floating-z-index: $rmd-utils-temporary-element-z-index !default;The default page margin to use for the floating action button positions.
$rmd-button-floating-margin: 1.5rem !default;Since v2.3.0
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;@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;
@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;
@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;
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;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;Creates the styles for one of the button's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | 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 | Color|String|Number | null |
Updates one of the button's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The button theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
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.
@use 'react-md' as *;
.my-button {
@include rmd-button-reset;
@include rmd-typography(button);
display: inline-flex;
}
The base styles for a button.
@use 'react-md' as *;
.my-button {
@include rmd-button-base;
}
Creates the base styles for a text button.
Creates the base styles for an icon button.
Creates all the styles for a button. This should be used within a class or selector.
Creates all the styles for an unstyled button.
| Name | Description | Type | Default 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 | Boolean | false |
Creates the styles for all the floating button positions.
Creates the styles for the floating action button container. FAB
Creates all the styles for this package as well as defining all the theme CSS variables.
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.
Color|String|Numberone of the button's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
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.
Stringone of the button's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |