Buttons

Variables

md-btn-include-flat
$md-btn-include-flat: true !default;
Sass (Scss)

Description

Boolean if the flat button styles should be included.

Type

Boolean
md-btn-include-raised
$md-btn-include-raised: true !default;
Sass (Scss)

Description

Boolean if the raised button styles should be included.

Type

Boolean
md-btn-include-icon
$md-btn-include-icon: true !default;
Sass (Scss)

Description

Boolean if the icon button styles should be included.

Type

Boolean
md-btn-include-floating
$md-btn-include-floating: true !default;
Sass (Scss)

Description

Boolean if the floating button styles should be included.

Type

Boolean
md-btn-accessible-height
$md-btn-accessible-height: 48px;
Sass (Scss)

Description

The height for buttons to make them accessible for touch devices.

Type

Number

Used by

md-btn-text-border-radius
$md-btn-text-border-radius: 2px !default;
Sass (Scss)

Description

The border radius to apply to text buttons.

Type

Number

Used by

md-btn-mobile-font-size
$md-btn-mobile-font-size: 14px !default;
Sass (Scss)

Description

The font size for buttons on mobile devices.

Type

Number

Used by

See

md-btn-mobile-height
$md-btn-mobile-height: 36px !default;
Sass (Scss)

Description

The height for button on mobile devices.

Type

Number

Used by

See

md-btn-mobile-floating-margin
$md-btn-mobile-floating-margin: 16px !default;
Sass (Scss)

Description

The minimum margin to use for fixed floating buttons on mobile-devices.

Type

Number

Used by

See

md-btn-desktop-font-size
$md-btn-desktop-font-size: 13px !default;
Sass (Scss)

Description

The font size for buttons on desktop screens.

Type

Number

Used by

See

md-btn-desktop-height
$md-btn-desktop-height: 32px !default;
Sass (Scss)

Description

The height for buttons on desktop screens.

Type

Number

Used by

See

md-btn-desktop-floating-margin
$md-btn-desktop-floating-margin: 24px !default;
Sass (Scss)

Description

The minimum margin to use for fixed floating buttons on desktop screens.

Type

Number

Used by

See

md-btn-tb-padding
$md-btn-tb-padding: 8px !default;
Sass (Scss)

Description

The too and bottom padding to apply to text buttons.

Type

Number

Used by

md-btn-lr-padding
$md-btn-lr-padding: 16px !default;
Sass (Scss)

Description

The left and right padding to apply to text buttons.

Type

Number

Used by

md-btn-min-width
$md-btn-min-width: 88px !default;
Sass (Scss)

Description

The min width for a flat or raised button.

Type

Number

Used by

md-btn-floating-size
$md-btn-floating-size: 56px !default;
Sass (Scss)

Description

The default size for a floating button (FAB).

Type

Number

Used by

md-btn-floating-dense-size
$md-btn-floating-dense-size: 48px !default;
Sass (Scss)

Description

The size for a floating button when using the dense spec for icons.

Type

Number

Used by

md-btn-floating-mini-size
$md-btn-floating-mini-size: 40px !default;
Sass (Scss)

Description

The mini size for a floating button.

Type

Number

Used by

md-btn-floating-fixed-positions
$md-btn-floating-fixed-positions: ('tl' 'tr' 'bl' 'br') !default;
Sass (Scss)

Description

The available floating button fixed positions.

Type

List
md-btn-icon-size
$md-btn-icon-size: $md-font-icon-size * 2 !default;
Sass (Scss)

Description

The size for an icon button.

Type

Number

Used by

md-btn-icon-padding
$md-btn-icon-padding: $md-btn-icon-size / 4 !default;
Sass (Scss)

Description

The padding for an icon button.

Type

Number

Used by

md-btn-icon-dense-size
$md-btn-icon-dense-size: $md-font-icon-dense-size * 2 !default;
Sass (Scss)

Description

The size for a icon button when using the dense spec.

Type

Number

Used by

md-btn-icon-dense-padding
$md-btn-icon-dense-padding: $md-btn-icon-dense-size / 4 !default;
Sass (Scss)

Description

The padding to use for a dense icon button.

Type

Number

Used by

md-btn-icon-border-radius
$md-btn-icon-border-radius: 50% !default;
Sass (Scss)

Description

The border radius to apply to icon buttons.

Type

Number

Used by

md-btn-light-theme-base-color
$md-btn-light-theme-base-color: #999 !default;
Sass (Scss)

Description

The base color to use for default buttons in the light theme.

Type

Color
md-btn-light-theme-hover-color
$md-btn-light-theme-hover-color: rgba($md-btn-light-theme-base-color, .12) !default;
Sass (Scss)

Description

The background color to use for default buttons in the light theme.

Type

Color

Used by

md-btn-light-theme-disabled-color
$md-btn-light-theme-disabled-color: rgba($md-btn-light-theme-base-color, .2) !default;
Sass (Scss)

Description

The background color to use for default buttons in the light theme that have been disabled.

Type

Color
md-btn-light-theme-pressed-color
$md-btn-light-theme-pressed-color: rgba($md-btn-light-theme-base-color, .4) !default;
Sass (Scss)

Description

The background color to use for default buttons that have been pressed in the light theme.

Type

Color
md-btn-dark-theme-base-color
$md-btn-dark-theme-base-color: #ccc !default;
Sass (Scss)

Description

The base color to use for default buttons in the dark theme.

Type

Color
md-btn-dark-theme-hover-color
$md-btn-dark-theme-hover-color: rgba($md-btn-dark-theme-base-color, .12) !default;
Sass (Scss)

Description

The hover color to use for default buttons in the dark theme.

Type

Color

Used by

md-btn-dark-theme-disabled-color
$md-btn-dark-theme-disabled-color: rgba($md-btn-dark-theme-base-color, .2) !default;
Sass (Scss)

Description

The background color to use for default buttons in the dark theme that have been disabled.

Type

Color
md-btn-dark-theme-pressed-color
$md-btn-dark-theme-pressed-color: rgba($md-btn-dark-theme-base-color, .25) !default;
Sass (Scss)

Description

The background color to use for default buttons that have been pressed in the dark theme.

Type

Color
md-btn-text-height
$md-btn-text-height: null !default;
Sass (Scss)

Description

An optional height to apply to a text button for all screen sizes. This will take precedence over the mobile/desktop variables.

A side effect of using this variable is that the buttons will not be updated on mobile devices to have additional styles to make them accessible for touch users.

Type

Number

Used by

See

md-btn-text-font-size
$md-btn-text-font-size: null !default;
Sass (Scss)

Description

An optional font size to apply to a text button for all screen sizes. This will take precedence over the mobile/desktop variables.

Type

Number

Used by

See

md-btn-floating-margin
$md-btn-floating-margin: null !default;
Sass (Scss)

Description

An optional margin to get applied to floating buttons that are fixed on a page for all screen sizes. This will take precedence over the mobile/desktop variables.

Type

Number

Used by

See

md-btn-fixed-z-index
$md-btn-fixed-z-index: 10 !default;
Sass (Scss)

Description

The default z index for fixed floating buttons

Type

Number

Used by

See

Mixins

react-md-buttons
@mixin react-md-buttons($primary-color: $md-primary-color, $secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-media: $md-media-included, $include-flat: $md-btn-include-flat, $include-raised: $md-btn-include-raised, $include-icon: $md-btn-include-icon, $include-floating: $md-btn-include-floating, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the styles for material design buttons. Each button type can optionally be excluded. However, if the floating styles are included, the icon styles will also be included.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to theme the buttons with.

Color
$md-primary-color
$secondary-color

The secondary color to theme the buttons with.

Color
$md-secondary-color
$light-theme

Boolean if the buttons should be styled for the light theme.

Boolean
$md-light-theme
$include-media

Boolean if the media queries should also be included in this mixin.

Boolean
$md-media-included
$include-flat

Boolean if the flat styles for buttons should be included.

Boolean
$md-btn-include-flat
$include-raised

Boolean if the raised styles for buttons should be included.

Boolean
$md-btn-include-raised
$include-icon

Boolean if the icon styles for buttons should be included.

Boolean
$md-btn-include-icon
$include-floating

Boolean if the floating styles for buttons should be included.

Boolean
$md-btn-include-floating
$include-dense-icons

Boolean if the dense specs for icons should be included for buttons.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@include react-md-buttons
Sass (Scss)

Requires

Used by

react-md-button-fixed-positions
@mixin react-md-button-fixed-positions($margin, $positions: $md-btn-floating-fixed-positions) {}
Sass (Scss)
Click to expand

Description

A simple mixin for applying a screen edge margin positioning to a fixed button. If the position name contains the first letter of the positioning style, the margin will get applied to that style.

So if the position name is 'tl', the margin will get applied to the top and the `left.

Parameters

NameDescriptionTypeDefault value
$margin

the button's margin from the screen edge.

Number
$positions

The positions to create the styles for.

List
$md-btn-floating-fixed-positions

Used by

react-md-buttons-mobile
@mixin react-md-buttons-mobile($include-flat: $md-btn-include-flat, $include-raised: $md-btn-include-raised, $include-floating: $md-btn-include-floating) {}
Sass (Scss)
Click to expand

Description

Creates the styles for buttons on mobile devices. This really just sets the font size and adds some styles to make the button be accessible for touch.

Parameters

NameDescriptionTypeDefault value
$include-flat

Boolean if the flat styles for buttons should be included.

Boolean
$md-btn-include-flat
$include-raised

Boolean if the raised styles for buttons should be included.

Boolean
$md-btn-include-raised
$include-floating

Boolean if the floating styles for buttons should be included.

Boolean
$md-btn-include-floating

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-buttons-mobile;
}
Sass (Scss)

Requires

Used by

react-md-buttons-desktop
@mixin react-md-buttons-desktop($include-flat: $md-btn-include-flat, $include-raised: $md-btn-include-raised, $include-icon: $md-btn-include-icon, $include-floating: $md-btn-include-floating, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the styles for buttons on desktop screens.

Parameters

NameDescriptionTypeDefault value
$include-flat

Boolean if the flat styles for buttons should be included.

Boolean
$md-btn-include-flat
$include-raised

Boolean if the raised styles for buttons should be included.

Boolean
$md-btn-include-raised
$include-icon

Boolean if the icon styles for buttons should be included.

Boolean
$md-btn-include-icon
$include-floating

Boolean if the floating styles for buttons should be included.

Boolean
$md-btn-include-floating
$include-dense-icons

Boolean if the dense specs for icons should be included for buttons.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-buttons-desktop;
}
Sass (Scss)

Requires

Used by

react-md-buttons-media
@mixin react-md-buttons-media($include-flat: $md-btn-include-flat, $include-raised: $md-btn-include-raised, $include-icon: $md-btn-include-icon, $include-floating: $md-btn-include-floating, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the media queries and styles for buttons for mobile and desktop.

Parameters

NameDescriptionTypeDefault value
$include-flat

Boolean if the flat styles for buttons should be included.

Boolean
$md-btn-include-flat
$include-raised

Boolean if the raised styles for buttons should be included.

Boolean
$md-btn-include-raised
$include-icon

Boolean if the icon styles for buttons should be included.

Boolean
$md-btn-include-icon
$include-floating

Boolean if the floating styles for buttons should be included.

Boolean
$md-btn-include-floating
$include-dense-icons

Boolean if the dense specs for icons should be included for buttons.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@include react-md-buttons-media;
Sass (Scss)

Requires

Used by

react-md-theme-buttons
@mixin react-md-theme-buttons($primary-color: $md-primary-color, $secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-flat: $md-btn-include-flat, $include-raised: $md-btn-include-raised, $include-icon: $md-btn-include-icon, $include-floating: $md-btn-include-floating) {}
Sass (Scss)
Click to expand

Description

Themes the buttons ONLY when the $primary-color does not equal the $md-primary-color, the $secondary-color does not equal the $md-secondary-color, or the $md-light-theme does not equal the $md-light-theme.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to theme the buttons with.

Color
$md-primary-color
$secondary-color

The secondary color to theme the buttons with.

Color
$md-secondary-color
$light-theme

Boolean if the buttons should be styled for the light theme.

Boolean
$md-light-theme
$include-flat

Boolean if the flat styles for buttons should be included.

Boolean
$md-btn-include-flat
$include-raised

Boolean if the raised styles for buttons should be included.

Boolean
$md-btn-include-raised
$include-icon

Boolean if the icon styles for buttons should be included.

Boolean
$md-btn-include-icon
$include-floating

Boolean if the floating styles for buttons should be included.

Boolean
$md-btn-include-floating

Examples

Example Usage SCSS

@include react-md-theme-buttons($md-orange-500, $md-purple-a-200, !$md-light-theme);
Sass (Scss)

Requires

Used by