Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@rmwc/icon-button

Package Overview
Dependencies
Maintainers
1
Versions
174
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rmwc/icon-button - npm Package Compare versions

Comparing version 14.0.4 to 14.0.5

12

package.json
{
"name": "@rmwc/icon-button",
"version": "14.0.4",
"version": "14.0.5",
"main": "./index.js",

@@ -39,3 +39,2 @@ "types": "./index.d.ts",

"peerDependencies": {
"@material/icon-button": "^14.0.0",
"react": ">=16.8.x",

@@ -45,7 +44,8 @@ "react-dom": ">=16.8.x"

"dependencies": {
"@rmwc/base": "14.0.4",
"@rmwc/icon": "14.0.4",
"@rmwc/ripple": "14.0.4",
"@rmwc/types": "14.0.4"
"@material/icon-button": "^14.0.0",
"@rmwc/base": "14.0.5",
"@rmwc/icon": "14.0.5",
"@rmwc/ripple": "14.0.5",
"@rmwc/types": "14.0.5"
}
}
# Icon Buttons
> Icon buttons allow users to take actions, and make choices, with a single tap.
Icon buttons allow users to take actions, and make choices, with a single tap.

@@ -8,7 +8,7 @@ - Module **@rmwc/icon-button**

- Using CSS Loader
- import **'@rmwc/icon-button/styles';**
- import '@rmwc/icon-button/styles';
- Or include stylesheets
- **'@material/icon-button/dist/mdc.icon-button.css'**;
- **'@rmwc/icon/icon.css'**;
- **'@material/ripple/dist/mdc.ripple.css'**;
- **'@material/icon-button/dist/mdc.icon-button.css'**
- **'@rmwc/icon/icon.css'**
- **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/buttons/icon-buttons/](https://material.io/develop/web/components/buttons/icon-buttons/)

@@ -20,33 +20,18 @@

Default
```jsx
<>
<IconButton icon="star" label="Rate this!" />
```js
<IconButton icon="favorite" label="Favorite" disabled />
<\>
<IconButton icon\="star" label\="Rate this!" />
<IconButton icon\="favorite" label\="Favorite" disabled />
<IconButton
icon\="images/icons/twitter.png"
aria-label\="Tweet it!"
tag\="a"
target\="\_blank"
href\={\`https://twitter.com/intent/tweet?text=${encodeURIComponent(
icon="images/icons/twitter.png"
aria-label="Tweet it!"
tag="a"
target="_blank"
href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
'You should definitely be using RMWC for your next project! https://rmwc.io'
)}\`}
)}`}
/>
</\>
</>
```

@@ -58,111 +43,72 @@

Uncontrolled
```js
<\>
<IconButton icon\="favorite\_border" onIcon\="favorite" />
<IconButton icon\="favorite" onIcon\="favorite" disabled />
</\>
```jsx
<>
<IconButton icon="favorite_border" onIcon="favorite" />
<IconButton icon="favorite" onIcon="favorite" disabled />
</>
```
Controlled
```js
```jsx
function Controlled() {
const \[isChecked, setIsChecked\] \= React.useState(false);
const [isChecked, setIsChecked] = React.useState(false);
return (
<\>
<>
<IconButton
checked\={isChecked}
onClick\={() \=> setIsChecked(!isChecked)}
onIcon\="star"
icon\="star\_border"
checked={isChecked}
onClick={() => setIsChecked(!isChecked)}
onIcon="star"
icon="star_border"
/>
<IconButton
checked\={isChecked}
onClick\={() \=> setIsChecked(!isChecked)}
onIcon\="images/icons/twitter.png"
icon\="images/icons/facebook.png"
checked={isChecked}
onClick={() => setIsChecked(!isChecked)}
onIcon="images/icons/twitter.png"
icon="images/icons/facebook.png"
/>
</\>
</>
);
}
```
Component as Icon
```js
```jsx
<IconButton
onIcon\={
onIcon={
<div
style\={{
style={{
background: 'red',
width: '24px',
height: '24px'
}}
/>
}
icon\={
icon={
<div
style\={{
style={{
background: 'green',
width: '24px',
height: '24px',
borderRadius: '50%'
}}
/>
}
/>
```
## IconButton
An IconButton component that can also be used as a toggle.
```
### Props
## IconButton
| Name | Type | Description |
|------|------|-------------|
| `checked` | `boolean` | Controls the on / off state of the a toggleable button. |
| `disabled` | `boolean` | Makes the button disabled |
| `foundationRef` | `Ref<MDCIconButtonToggleFoundation<>>` | Advanced: A reference to the MDCFoundation. Only for Toggleable buttons. |
| `icon` | `IconPropT` | Icon for the button |
| `label` | `string` | Apply an aria label. |
| `onChange` | `(evt: IconButtonOnChangeEventT) => void` | An onChange callback that receives a custom event. evt.detail = { isOn: boolean } |
| `onIcon` | `IconPropT` | If specified, renders a toggle with this icon as the on state. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc