Icon Button

Icon buttons allow users to take actions, and make choices, with a single tap.

info

Note

For buttons with both icons and text, use the mbc::button component. For more information, see the Button page .

Basic link 

<x-mbc::icon-button icon="delete" />
<x-mbc::icon-button icon="send" />
<x-mbc::icon-button icon="share" />

Color link 

<x-mbc::icon-button icon="home" />
<x-mbc::icon-button
    icon="bluetooth"
    color="primary"
/>
<x-mbc::icon-button
    icon="filter_vintage"
    color="secondary"
/>
<x-mbc::icon-button
    icon="delete"
    color="error"
/>
<x-mbc::icon-button
    icon="paid"
    color="warning"
/>
<x-mbc::icon-button
    icon="power_settings_new"
    color="info"
/>
<x-mbc::icon-button
    icon="check_circle"
    color="success"
/>

Toggle Button link 

<x-mbc::icon-button icon="home" toggle />
<x-mbc::icon-button icon="power_settings_new" color="info" toggle="on" />
<x-mbc::icon-button icon="check_circle" color="success" toggle />
<x-mbc::icon-button icon="send" color="secondary" toggle="on" disabled />
<x-mbc::icon-button icon="photo_camera" color="secondary" toggle="off" disabled />

Toggle Off Icon link

By default the OFF state icon of toggle button same with the ON state icon, if you want to change the OFF state icon you can simply add the offIcon attribute. 

<x-mbc::icon-button icon="fullscreen_exit" offIcon="fullscreen" toggle />
<x-mbc::icon-button icon="wifi" offIcon="wifi_off" toggle="on" />
<x-mbc::icon-button icon="favorite" offIcon="favorite:two-tone" toggle color="error" />

Render as Anchor Tag link

By default the mbc::icon-button will be rendered as <button> element. If you want to make it an <a> element please add href attribute to the mbc::icon-button. If you add the disabled attribute the mbc::icon-button will be rendered as disabled button. 

<x-mbc::icon-button icon="mail" href="mailto:zainadam.id@gmail.com" />
<x-mbc::icon-button icon="phone" color="success" href="tel: +123 456 789" />
<x-mbc::icon-button icon="phone" color="success" href="tel: +123 456 789" disabled />

Ripple Disabled link

Just add the disableRipple attribute to the mbc::icon-button component. however, disabling ripple make button not hard to be recognized by user, please add the hover style. 

<x-mbc::icon-button icon="home" ripple="false" />
<x-mbc::icon-button icon="close" color="error" ripple="false" />
<x-mbc::icon-button icon="logout" color="success" ripple="false" />

Properties link

mbc::icon-button link

Name Type Default Description
color string null The color of the icon.
disableRipple boolean false If true, the ripple effect will be disabled.
disabled boolean false If true, the icon button will be disabled.
href string null The URL to link to when the button is clicked.
icon string null The name of the icon.
offIcon string null The name of the icon when the toggle is off.
toggle boolean false If true, the icon button will be a toggle button.
toggle string null The toggle state of the icon button.
withWrapper boolean false If true, the icon button will be wrapped with a div element.

References link

Edit this page