Skip to content

docs(button): add docs for button #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 11, 2016
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 99 additions & 0 deletions src/components/button/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
# md-button

`md-button` is an HTML `<button>` or `<a>` tag enhanced with styling and animation to match the [spec of a Material Design button](https://www.google.com/design/spec/components/buttons.html).

### Button types

There are four types of buttons:
1. Flat buttons - `md-button`
* Rectangular button
* Defaults to white background
* No box shadow
2. Raised buttons - `md-raised-button`
* Rectangular button
* Defaults to white background
* Box shadow applied
3. Floating Action Buttons (FABs) - `md-fab`
* Circular button
* Defaults background to "accent" palette defined in theme
* Box shadow applied
* 56 by 56 px
4. Mini Floating Action Buttons (Mini FABs) - `md-mini-fab`
* Circular button
* Defaults background to "accent" palette defined in theme
* Box shadow applied
* 40 by 40 px

Each is an attribute directive that you can add to a `button` or `a` tag. You can provide custom content to the button by inserting it
between the tags, as you would with a normal button.

Example:

```html
<button md-button>FLAT</button>
<button md-raised-button>RAISED</button>
<button md-fab>
<i class="material-icons md-24">add</i>
</button>
<button md-mini-fab>
<i class="material-icons md-24">add</i>
</button>
```

Output:

<img src="https://material.angularjs.org/material2_assets/buttons/basic-buttons.png">

### Theming

All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute.
Simply pass in the palette name.

In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background.

Example:

```html
<button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>
```

Output:

<img src="https://material.angularjs.org/material2_assets/buttons/colored-buttons.png">

### Disabling

You can disable any button type through the native `disabled` property. You can add it directly, or bind it to a property on your
component class.

```html
<button md-button disabled>off</button>
<button md-raised-button [disabled]="isDisabled">off</button>
<button md-mini-fab [disabled]="isDisabled">check circle</button>
```

Output:

<img src="https://material.angularjs.org/material2_assets/buttons/disabled-buttons.png">

### Accessibility

* In high contrast mode, a strong border is added to the button to make it easier to see.
* Button focus events originating from the keyboard will retain focus styles, while button focus events from the mouse will not.
* As `md-button` is added to an existing `button` or `a` tag, it enjoys all the accessibility natively built into these elements.


### Upcoming work

We will also be adding ink ripples to buttons in an upcoming milestone.

### API Summary

Properties:

| Name | Type | Description |
| --- | --- | --- |
| `color` | `"primary"|"accent"|"warn"` | The color palette of the button
| `disabled` | boolean | Whether or not the button is disabled