Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@material/button
Advanced tools
@material/button - npm Package Compare versions
Comparing version 0.6.0 to 0.7.0
| { | ||
| "name": "@material/button", | ||
| "description": "The Material Components for the web button component", | ||
| "version": "0.6.0", | ||
| "version": "0.7.0", | ||
| "license": "Apache 2.0", | ||
@@ -16,7 +16,7 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@material/elevation": "^0.1.11", | ||
| "@material/ripple": "^0.8.6", | ||
| "@material/theme": "^0.3.0", | ||
| "@material/elevation": "^0.1.12", | ||
| "@material/ripple": "^0.8.7", | ||
| "@material/theme": "^0.3.1", | ||
| "@material/typography": "^0.3.0" | ||
| } | ||
| } |
103
README.md
@@ -44,3 +44,8 @@ <!--docs: | ||
| ### Button type | ||
| ### HTML Structure | ||
| ```html | ||
| <button class="mdc-button"> | ||
| Button | ||
| </button> | ||
| ``` | ||
@@ -51,38 +56,36 @@ > Note: Examples and documents use generic `<button>`, but users can also apply | ||
| #### Text Button | ||
| ### Adding Icon | ||
| ```html | ||
| <button class="mdc-button"> | ||
| Text button | ||
| </button> | ||
| ``` | ||
| Users can nest `mdc-button__icon` inside the button element to add an icon. The icon in button | ||
| is set to 18px to meet legibility requirements. | ||
| #### Raised Button | ||
| We recommend you load [Material Icons]((https://design.google.com/icons/)) from Google Fonts | ||
| ```html | ||
| <button class="mdc-button mdc-button--raised"> | ||
| Raised button | ||
| <head> | ||
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | ||
| </head> | ||
| <button class="mdc-button"> | ||
| <i class="material-icons mdc-button__icon">favorite</i> | ||
| Button | ||
| </button> | ||
| ``` | ||
| #### Unelevated Button | ||
| ### CSS Classes | ||
| ```html | ||
| <button class="mdc-button mdc-button--unelevated"> | ||
| Unelevated button | ||
| </button> | ||
| ``` | ||
| #### Stroked Button | ||
| CSS Class | Description | ||
| --- | --- | ||
| `mdc-button` | Mandatory, defaults to a text button that is flush with the surface | ||
| `mdc-button__icon` | Optional, for the icon element | ||
| `mdc-button--raised` | Optional, a contained button that is elevated upon the surface | ||
| `mdc-button--unelevated` | Optional, a contained button that is flush with the surface | ||
| `mdc-button--stroked` | Optional, a contained button that is flush with the surface and has a visible border | ||
| `mdc-button--dense` | Optional, compresses the button text to make it slightly smaller | ||
| `mdc-button--compact` | Optional, reduces the amount of horizontal padding in the button | ||
| ```html | ||
| <button class="mdc-button mdc-button--stroked"> | ||
| Stroked button | ||
| </button> | ||
| ``` | ||
| ### Button state | ||
| ### Disabled Button | ||
| #### Disabled | ||
| Users can add `disabled` directly to the button element or set the fieldset containing | ||
@@ -98,20 +101,4 @@ the button to `disabled` to disable a button. Disabled buttons cannot be interacted | ||
| ### Colored | ||
| ### Adding MDC Ripple | ||
| MDC Buttons have a default baseline color, but it is also possible to adopt the | ||
| application's primary or secondary color by adding the `mdc-button--primary` or | ||
| `mdc-button--accent` modifier. | ||
| > Note: "Secondary" was previously called "accent" in the Material spec. See | ||
| [mdc-theme](https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme) | ||
| for details. | ||
| ```html | ||
| <button class="mdc-button mdc-button--accent"> | ||
| Colored button | ||
| </button> | ||
| ``` | ||
| ### Adding ripples to buttons | ||
| To add the ink ripple effect to a button, attach a [ripple](../mdc-ripple) instance to the | ||
@@ -134,24 +121,22 @@ button element. | ||
| ## Classes | ||
| ### Sass Mixins | ||
| ### Block | ||
| By default an MDC Button will inherit its color from the theme and align with [Material Design button requirements](https://material.io/guidelines/components/buttons.html). To customize a Button's color and properties, you can use the following mixins. | ||
| The block class is `mdc-button`. This defines the top-level button element. | ||
| #### `mdc-button-filled-accessible($container-fill-color)` | ||
| ### Element | ||
| This mixin is provided for customizing a *raised* or *unelevated* button's color. It changes the Button's | ||
| container color to the given color, and updates the Button's ink and ripple color to meet accessibility standards. | ||
| The button component has no inner elements. | ||
| ### Advanced Sass Mixins | ||
| ### Modifier | ||
| > **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, stroke or ripple. You can use all of them if you want to completely customize a Button. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, stroke and ripple colors that work together, and meet accessibility standards.** | ||
| The provided modifiers are: | ||
| | Class | Description | | ||
| | --------------------- | ------------------------------------------------------- | | ||
| | `mdc-button--raised` | A contained button that is elevated upon the surface. | | ||
| | `mdc-button--unelevated` | A contained button that is flush with the surface. | | ||
| | `mdc-button--stroked` | A contained button that is flush with the surface and has a visible border. | | ||
| | `mdc-button--dense` | Compresses the button text to make it slightly smaller. | | ||
| | `mdc-button--compact` | Reduces the amount of horizontal padding in the button. | | ||
| | `mdc-button--primary` | Colors the button with the primary color. | | ||
| | `mdc-button--accent` | Colors the button with the secondary color. | | ||
| Mixin | Description | ||
| --- | --- | ||
| `mdc-button-container-fill-color` | Sets the container color to the given color | ||
| `mdc-button-ink-color` | Sets the ink color to the given color | ||
| `mdc-button-stroke-color` | Sets the stroke color to the given color | ||
| `mdc-button-ripple` | Sets the ripple to the given [ripple configuration](https://github.com/material-components/material-components-web/blob/master/packages/mdc-ripple/README.md) | ||
| `mdc-button-corner-radius` | Sets the corner radius to the given number (defaults to 2px) | ||
| `mdc-button-stroke-width` | Sets the stroke width to the given number (defaults to 2px) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by16.67%
7
Worsened metrics
- Total package byte prevSize
- decreased by-41.61%
77606
- Lines of code
- decreased by-48.2%
820
- Number of lines in readme file
- decreased by-9.74%
139
Dependency changes
Updated@material/elevation@^0.1.12
Updated@material/ripple@^0.8.7
Updated@material/theme@^0.3.1