Phoenix Buttons
Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.
This repository is a module of the full phoenix repository.
Install
This repository is distributed with npm. After installing npm, you can install phoenix-buttons
with this command.
$ npm install --save phoenix-buttons
Explorer
Check out how to use phoenix Buttons with React 16, Webpack 4 and Babel 7 here
NPM
Get the latest phoenix-buttons here
Usage
You can import it like this.
MaterialButtons
MaterialButtons allow users to take actions, and make choices, with a single tap.
ContainedMaterialButtons
ContainedMaterialButtons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.
Contained Default MaterialButton
Default
Contained Primary MaterialButton
Primary
Contained Secondary MaterialButton
Secondary
Contained Disabled MaterialButton
Disabled
Contained Link MaterialButton
Link
Contained Upload MaterialButton
Upload
TextMaterialButtons
TextMaterialButtons are typically used for less-pronounced actions, including those located:
- In dialogs
- In cards
In cards, text buttons help maintain an emphasis on card content.
Text Default MaterialButton
Default
Text Primary MaterialButton
Primary
Text Secondary MaterialButton
Secondary
Text Disabled MaterialButton
Disabled
Text Link MaterialButton
Link
Text Upload MaterialButtons
Upload
OutlinedMaterialButtons
OutlinedMaterialButtons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.
Outlined Default MaterialButton
Default
Outlined Primary MaterialButton
Primary
Outlined Secondary MaterialButton
Secondary
Outlined Disabled MaterialButton
Disabled
Outlined Link MaterialButton
Link
Outlined Upload MaterialButtons
Upload