How to use @rmwc/button - 10 common examples
To help you get started, we’ve selected a few @rmwc/button examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
fluidtrends / chunky / web / lib / components / Feature.js View on Github 
value: function button() {
if (!this.props.actionTitle) return null;
return _react2.default.createElement(
_button.Button,
{
style: {
marginBottom: '30px'
},
onClick: this.triggerEvent(),
raised: true,
theme: 'secondary-bg text-primary-on-secondary'
},
this.props.actionTitle
);
}
}, {value: function renderCoverAction() {
if (!this.props.primaryActionTitle) {
return _react2.default.createElement('div', {
className: 'jsx-869534894'
});
}
return _react2.default.createElement(
_button.Button,
{
onClick: this.triggerAction.bind(this),
raised: true,
theme: 'secondary-bg text-primary-on-secondary',
style: {
margin: '20px',
color: this.props.theme.mainActionTextColor || '#fff'
}
},
' ',
this.props.primaryActionTitle,
' '
);
}
}, {value: function renderNavigationMenuItem(item, index) {
var _this3 = this;
var translatedTitle = this.props.theme.headerTranslation && this.state.strings && this.state.selectedLanguage ? this.state.strings[this.state.selectedLanguage]['title' + index] : item.title;
var MenuIcon = _react2.default.createElement(_toolbar.ToolbarMenuIcon, {
onClick: this._onMenuItem(item),
use: item.icon,
style: {
color: this.props.theme.navigationTintColor,
marginRight: '0px'
}
});
var buttonAdditionalStyle = this.props.theme.navigationButtonStyle ? this.props.theme.navigationButtonStyle : {};
var MenuButton = _react2.default.createElement(
_button.Button,
{
onClick: this._onMenuItem(item),
style: _extends({
color: this.props.theme.navigationTintColor,
textShadow: this.props.theme.textShadow,
marginRight: '0px'
}, buttonAdditionalStyle)
},
translatedTitle
);
var actionButtonAdditionalStyle = this.props.theme.navigationActionButtonStyle ? this.props.theme.navigationActionButtonStyle : {};
var MenuActionButton = _react2.default.createElement(
_button.Button,
{
raised: true,
theme: 'secondary-bg text-primary-on-secondary',value: function renderFooterSectionElement(element) {
return _react2.default.createElement(
_list.ListItem,
{ key: element.id, style: { cursor: 'pointer' }, onClick: this.triggerEvent(element.id, { handler: element.link }) },
_react2.default.createElement(
_button.Button,
{ onClick: this.triggerEvent(element.id, { handler: element.link }), style: { color: this.props.theme.footerTintColor, textAlign: 'left' } },
element.title
)
);
}
}, {value: function renderCard(item, index) {
var details = item.details.substring(0, 120);
return _react2.default.createElement(
_card.Card,
{ style: { width: '320px' }, key: 'item' + index },
_react2.default.createElement(
_button.Button,
{ onClick: this.triggerEvent(item.name || index, item.action), style: { padding: 0, height: '100%' } },
this.renderCardMedia(item)
),
_react2.default.createElement(
'div',
{ style: { padding: '0 1rem 1rem 1rem' } },
_react2.default.createElement(
_typography.Typography,
{ use: 'title', tag: 'h2' },
item.title
),
_react2.default.createElement(
_typography.Typography,
{
use: 'subheading1',
tag: 'h3',var buttonAdditionalStyle = this.props.theme.navigationButtonStyle ? this.props.theme.navigationButtonStyle : {};
var MenuButton = _react2.default.createElement(
_button.Button,
{
onClick: this._onMenuItem(item),
style: _extends({
color: this.props.theme.navigationTintColor,
textShadow: this.props.theme.textShadow,
marginRight: '0px'
}, buttonAdditionalStyle)
},
translatedTitle
);
var actionButtonAdditionalStyle = this.props.theme.navigationActionButtonStyle ? this.props.theme.navigationActionButtonStyle : {};
var MenuActionButton = _react2.default.createElement(
_button.Button,
{
raised: true,
theme: 'secondary-bg text-primary-on-secondary',
onClick: this._onMenuItem(item),
style: _extends({
color: this.props.theme.navigationTextButton,
marginRight: '0px'
}, actionButtonAdditionalStyle)
},
'' + translatedTitle
);
var languages = this.props.theme.languages;
var dropdownAdditionalStyle = this.props.theme.dropdownStyle ? this.props.theme.dropdownStyle : {};
var MenuDropdown = _react2.default.createElement(_select.Select, {return _react2.default.createElement(
'div',
{ style: {
alignSelf: 'stretch',
backgroundColor: this.props.sectionsBackgroundColor,
textAlign: 'left',
paddingLeft: '20px'
} },
_react2.default.createElement(
_menu.MenuAnchor,
{ style: {
padding: '10px'
} },
_react2.default.createElement(
_button.Button,
{
style: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
color: this.props.sectionSelectedColor
},
onClick: function onClick(evt) {
return _this3.setState({ 'compactMenuIsOpen': !_this3.state.compactMenuIsOpen });
} },
this.props.section.menuTitle,
_react2.default.createElement(_icon.Icon, { use: 'expand_more', style: {
color: this.props.sectionSelectedColor
} })
),
_react2.default.createElement(},
_react2.default.createElement('img', { src: this.props.linkedinIcon })
),
website && _react2.default.createElement(
_button.ButtonIcon,
{
style: { cursor: 'pointer' },
onClick: function onClick() {
_this4.onLinkClick(item.website);
}
},
_react2.default.createElement('img', { src: this.props.webIcon })
)
),
text && _react2.default.createElement(
_button.Button,
{
style: { marginTop: 10 },
onClick: function onClick() {
_this4.setState({ detailDialogOpen: true, item: item });
}
},
translatedBtnSeeMoreText
)
)
)
);
}
}, {value: function renderAction() {
return _react2.default.createElement(
_button.Button,
{ onClick: this.state.period.onAction || this.triggerEvent(), raised: true, style: { padding: '0 20px' }, theme: 'secondary-bg text-primary-on-secondary' },
this.state.period.actionTitle
);
}
}, {item.name
),
_react2.default.createElement(
_typography.Typography,
{ use: 'title', tag: 'h3', style: { textAlign: 'center' } },
item.title
)
),
_react2.default.createElement(
'div',
{ style: { textAlign: 'center' } },
_react2.default.createElement(
'div',
{ style: { display: 'flex', justifyContent: 'center' } },
github && _react2.default.createElement(
_button.ButtonIcon,
{
style: { cursor: 'pointer' },
onClick: function onClick() {
_this4.onLinkClick(item.github);
}
},
_react2.default.createElement('img', { src: this.props.githubIcon })
),
linkedIn && _react2.default.createElement(
_button.ButtonIcon,
{
style: { cursor: 'pointer' },
onClick: function onClick() {
_this4.onLinkClick(item.linkedIn);
}
},@rmwc/button
Buttons communicate the action that will occur when the user touches them.
