@rmwc/button

Buttons

Buttons communicate the action that will occur when the user touches them.

• Module @rmwc/button
• Import styles:
  • import '@material/button/dist/mdc.button.css'
• MDC Docs: https://material.io/develop/web/components/buttons/

<Button label="Button" />

<>
  <Button label="Icon" icon="favorite" />
  <Button label="Trailing" trailingIcon="keyboard_arrow_right" />
  <Button label="Loading" icon={<CircularProgress />} />
</>

<>
  <Button label="Raised" raised />
  <Button label="Unelevated" unelevated />
  <Button label="Outlined" outlined />
  <Button label="Dense" dense />
  <Button label="No Ripple" ripple={false} />
</>

<>
  <Button label="Danger" danger raised />
  <Button label="Danger" danger outlined />
  <Button label="Danger" danger />
</>

<>
  <Button
    label="With Theme"
    raised
    theme={['secondaryBg', 'onSecondary']}
  />
  {/**
    This example uses "accent" to control the color of the Ripple.
    See the documentation on Ripples.
  */}
  <Button
    label="With Theme"
    theme="secondary"
    ripple={{ accent: true }}
  />
</>

<Button>
  {/** Alternatively pass content as children */}
  As Children
</Button>

Button

The Button component.

Props

Name	Type	Description
children	React.ReactNode	Content specified as children.
danger	undefined | false | true	Used to indicate a dangerous action.
dense	undefined | false | true	Make the Button dense.
disabled	undefined | false | true	Make the button disabled
icon	RMWC.IconPropT	An Icon for the Button
label	React.ReactNode | any	Content specified as a label prop.
outlined	undefined | false | true	Make the button outlined.
raised	undefined | false | true	Make the Button raised.
ripple	RipplePropT	Adds a ripple effect to the component
trailingIcon	RMWC.IconPropT	A trailing icon for the Button
unelevated	undefined | false | true	Make the button unelevated.

Changelog

5.7.0 (2019-09-11)

Chores

• Provider: Fix missing doc props (a3e688cc)
• Slider: Improve test cov (ffff8437)
• Docs:
  • generating content (d2bed10e)
  • Generating updated docs (ecf01d64)
  • Update contrib guidelines (785125f3)
  • Fix issue with new react router not re-rendering on url change (6ef8fea2)
• Select: Removing console.log (76027171)
• Avatar: Improve test cov (94ea0c52)
• DataTable:
  • Update type signature to allow a number instead of a union. (6575c7d8)
  • Update documentation about comparison to official spec. (047eb5ef)
• Base: Updating all deps (b0925bc2)

New Features

• Typography: Added ability to provide a mapping for type classes to HTML tags. (73e870dc)
• Tooltip: Added new tooltip component #346 (c08e5be5)
• Tabs: Adding tab transitions and icon indicators #478 (56970b63)

Bug Fixes

• Select: Corrects issues with enhanced select not floating label when using manual rendering. #486 (870f4eaf)
• Slider: Corrects issue where Slider would crash when value was out of bounds #358 (1520ce70)
• List: Corrects issue with collapsible list items that have margin #485 (abe9edf0)
• Chip: Correct outdated dependency when using the main rmwc install. Fixes #476 (fb4a52e5)