@react-md/button
Advanced tools
This package is used to create buttons with the material design spec. There is built-in support to be able to render accessible clickable divs that look like buttons, or even apply button styles to any element.
Create native buttons with multiple themes based on the material design specifications including:
Also includes a buttonThemeClassNames function that can be used to apply a
button theme to any component by generating the required className prop.
npm install --save @react-md/button
If you would also like dynamic themes and icon support, it is recommended to also install:
npm install --save @react-md/theme \
@react-md/typography \
@react-md/icon
You should check out the full documentation for live examples and more customization information, but an example usage is shown below.
import { render } from "react-dom";
import { Button } from "@react-md/button";
const App = () => (
<>
<Button>Text Button</Button>
<Button theme="primary" themeType="flat">
Text Button
</Button>
<Button theme="secondary" themeType="raised">
Text Button
</Button>
<Button theme="warning" themeType="contained">
Text Button
</Button>
<Button theme="error">Text Button</Button>
<Button theme="clear">Text Button</Button>
<Button disabled>Text Button</Button>
</>
);
render(<App />, document.getElementById("root"));
Buttons can be rendered specifically as icon only buttons or as additional
support to the provided text. When rendering icons, you must also install
and use the @react-md/icon package to get icon support. You can also install
the @react-md/material-icons package if you'd like pre-built components for
every material icon that exists.
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { TextIconSpacing, FontIcon } from "@react-md/icon";
import { DeleteSVGIcon } from "@react-md/material-icons";
const App = () => (
<>
<Button>
<TextIconSpacing icon={<FontIcon>info_outline</FontIcon>}>
About
</TextIconSpacing>
</Button>
<Button theme="primary" themeType="raised">
<TextIconSpacing icon={<FontIcon>info_outline</FontIcon>} iconAfter>
About
</TextIconSpacing>
</Button>
<Button theme="error" themeType="contained">
<TextIconSpacing icon={<DeleteSVGIcon />}>
Permanently Delete
</TextIconSpacing>
</Button>
</>
);
render(<App />, document.getElementById("root"));
If you have used react-md in the past, notice that there are no longer any
icon related props to handle this for you. It became difficult and confusing
to use when there were a lot of different icon positioning props, so the props
were removed and it is now expected to use the helper components in the
@react-md/icon package instead. If you find a reusable pattern within your
app, it is recommended to make your own Button wrapper component to implement
this for you.
It is also possible to create buttons that only contain icons as children. For
general accessibility, you should provide either an aria-label to provide a
label for the action of the button or use aria-labelledby to point to an id
of an element that provides a label for the button. This is really to help
screen readers and generally recommended, but there are no restrictions in place
at this time to enforce this behavior.
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { TextIconSpacing, FontIcon } from "@react-md/icon";
import { DeleteSVGIcon } from "@react-md/material-icons";
const App = () => (
<>
<Button aria-label="More Info" buttonType="icon">
<FontIcon>info_outline</FontIcon>
</Button>
<Button
theme="primary"
themeType="raised"
buttonType="icon"
aria-label="More Info"
>
<FontIcon>info_outline</FontIcon>
</Button>
<Button
theme="error"
themeType="contained"
buttonType="icon"
aria-label="Permanently Delete"
>
<DeleteSVGIcon />
</Button>
</>
);
4.0.0 (2021-11-24)
This release focused on updating the @react-md/transition package to no longer log errors in React.StrictMode because react-ransition-group was using ReactDOM.findDOMNode to handle transitions.
All react-md packages will no longer use react-transition-group since all that functionality has been built into @react-md/transition with a slightly different API.
This release has also included my first attempt at automating upgrading to new major releases by introducing a new @react-md/codemod package that is similar to the react-codemod package. You can automate some of this release by running:
npx @react-md/codemod v3-to-v4/preset
Since I am still learning how to use jscodeshift, it will not be able to migrate everything but should still help with most changes.
DropdownMenu and Menu portal by default (98a6a9f), closes #1264eslint (8111cd3)ConditionalPortal supports ReactNode children (c83d578)Typography (30cf056)sass resolutions in package.json (db22cde), closes #1261react-marked-renderer for markdown stuffs (93ebaa4)prettier (9632d82)react-router-dom v6 (e012ef9)sass files (98ffe40)sassdoc to not through uncaught exceptions (8bdf532)prettier after upgrading to v2.4.0 (06110af)enable strict mode by default for nextjs-typescript (83e4c44)create-react-app example to use react-router-dom v6 (3c4d1ea)react-router-dom v6 (ae469ef)stylelint (22d1598)DropdownMenu and Menu components portal by
default. This should really only affect snapshot testslib.d.tsprop-types package.FAQs
This package is used to create buttons with the material design spec. There is built-in support to be able to render accessible clickable divs that look like buttons, or even apply button styles to any element.
The npm package @react-md/button receives a total of 1,209 weekly downloads. As such, @react-md/button popularity was classified as popular.
We found that @react-md/button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.