phoenix-buttons v0.0.4
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.
import { MaterialButton } from 'phoenix-buttons'
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
<MaterialButton
variant="contained"
onClick={handleOnClick}
>
Default
</MaterialButton>
Contained Primary MaterialButton
<MaterialButton
variant="contained"
color="primary"
onClick={handleOnClick}
>
Primary
</MaterialButton>
Contained Secondary MaterialButton
<MaterialButton
variant="contained"
color="secondary"
onClick={handleOnClick}
>
Secondary
</MaterialButton>
Contained Disabled MaterialButton
<MaterialButton
variant="contained"
onClick={handleOnClick}
disabled
>
Disabled
</MaterialButton>
Contained Link MaterialButton
<MaterialButton
variant="contained"
href="https://github.com/code-star/phoenix"
onClick={handleOnClick}
>
Link
</MaterialButton>
Contained Upload MaterialButton
<MaterialButton
variant="contained"
id="contained-button-file"
upload
onClick={handleOnClick}
>
Upload
</MaterialButton>
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
<MaterialButton
onClick={handleOnClick}
>
Default
</MaterialButton>
Text Primary MaterialButton
<MaterialButton
color="primary"
onClick={handleOnClick}
>
Primary
</MaterialButton>
Text Secondary MaterialButton
<MaterialButton
color="secondary"
onClick={handleOnClick}
>
Secondary
</MaterialButton>
Text Disabled MaterialButton
<MaterialButton
onClick={handleOnClick}
disabled
>
Disabled
</MaterialButton>
Text Link MaterialButton
<MaterialButton
href="https://github.com/code-star/phoenix"
onClick={handleOnClick}
>
Link
</MaterialButton>
Text Upload MaterialButtons
<MaterialButton
upload
id="flat-button-file"
onClick={handleOnClick}
>
Upload
</MaterialButton>
OutlinedMaterialButtons
OutlinedMaterialButtons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.
Outlined Default MaterialButton
<MaterialButton
variant="outlined"
onClick={handleOnClick}
>
Default
</MaterialButton>
Outlined Primary MaterialButton
<MaterialButton
variant="outlined"
color="primary"
onClick={handleOnClick}
>
Primary
</MaterialButton>
Outlined Secondary MaterialButton
<MaterialButton
variant="outlined"
color="secondary"
onClick={handleOnClick}
>
Secondary
</MaterialButton>
Outlined Disabled MaterialButton
<MaterialButton
variant="outlined"
onClick={handleOnClick}
disabled
>
Disabled
</MaterialButton>
Outlined Link MaterialButton
<MaterialButton
variant="outlined"
href="https://github.com/code-star/phoenix"
onClick={handleOnClick}
>
Link
</MaterialButton>
Outlined Upload MaterialButtons
<MaterialButton
variant="outlined"
upload
id="outlined-button-file"
onClick={handleOnClick}
>
Upload
</MaterialButton>