Button

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

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like dialogs, forms, cards, and toolbars.

info

Material Blade also provides the Icon Button and the Floating Action Button components.

Basic link

For the basic usage, you can use the button component without any attributes. The button text can be set via slot or by using the label attribute. 

// set the button text via slot
<x-mbc::button>  
    Regular Component
</x-mbc::button>

// set the button text via "label" attribute
<x-mbc::button label="Anynomus Component" />

Variants link

Buttons have four variants: text, raised, unelevated, and outlined. You can set the variant by using the variant attribute. The default variant is unelevated. 

<x-mbc::button
    label="Text"
    variant="text"
/>

<x-mbc::button
    label="Raised"
    variant="raised"
/>

<x-mbc::button
    label="Unelevated"
    variant="unelevated" // default variant
/>

<x-mbc::button
    label="Outlined"
    variant="outlined"
/>

Href Property link

You can use the href attribute to make the button act as an anchor tag. If the href attribute is set, the button will be rendered as an anchor tag. However, if you want to override the rendered tag, you can use the htmlTag attribute. 

<x-mbc::button
    href="#anchor-tag-button"
    label="Anchor Tag Button"
/>

// override the rendered tag. In this case, the button will be rendered as a div tag
// however, the href attribute will be still exist in the div tag.
<x-mbc::button
    href="#anchor-tag-button"
    label="Div Button"
    htmlTag="div"
/>

Buttons with Icons link

You can add an icon to the button by using the startIcon and endIcon attributes. 

<x-mbc::button
    label="Icon Leading"
    startIcon="favorite"
/>

<x-mbc::button
    label="Icon Trailing"
    endIcon="grade"
/>

<x-mbc::button
    label="Both"
    startIcon="noise_control_off"
    endIcon="disabled_by_default"
/>

You can also change the icon style by adding the icon style to the icon name. The available icon styles are two-tone, outlined, round, and sharp. The value of those attributes are same as the name attribute in the Icon component. Please visit the Icon component page for more information. 

<x-mbc::button
    label="Two Tone Icon Leading"
    :startIcon="['favorite', 'two-tone']"
/>

<x-mbc::button
    label="Outlined Icon Trailing"
    :endIcon="['grade', 'outlined']"
/>

<x-mbc::button
    label="Both"
    :startIcon="['noise_control_off', 'round']"
    :endIcon="['disabled_by_default', 'sharp']"
/>

Properties link

mbc::button link

Name Type Default Description
color string The button color.
disableRipple bool false Disable the ripple effect.
endIcon string | array The trailing icon.
fullwidth bool false Make the button full width.
href string The button href.
htmlTag string 'button' | 'a' The button html tag.
label string The button text.
startIcon string | array The leading icon.
variant 'text' | 'unelevated' | 'raised' | 'outlined' | string 'unelevated' The button variant.
withWrapper bool true Wrap the button with a div element.

References link

Edit this page