MButton
MButton allow users to take actions, and make choices, with a single tap.
Module import
vue
<script setup>
import { MButton } from "matarito-vue";
</script>vue
<script>
import { MButton } from "matarito-vue";
export default {
components: { MButton }
};
</script>Usage
vue
<template>
<MButton />
<M-Button />
<m-button />
</template>Basic
Text to display on a MButton is defined with the label property or the predefined default slot.
vue
<template>
<MButton label="Submit" />
<MButton>Submit</MButton>
</template>Icons
Icon of the MButton is specified with icon property and position is configured using iconPosition attribute.
vue
<template>
<MButton icon="pi pi-check" />
<MButton icon="pi pi-check" label="Submit" />
<MButton icon="pi pi-check" iconPosition="right" label="Submit" />
</template>Disabled
When disabled is present, the element cannot be focused and cursor is not allowed.
vue
<template>
<MButton icon="pi pi-check" disabled />
<MButton label="Submit" disabled />
</template>Variants
The MButton comes in three variants: filled (default), text, and outlined.
The MButton can also be rounded using rounded property.
- Filled buttons: are high-emphasis, distinguished by their use of fill. They contain actions that are primary to your app.
- Text buttons: are typically used for less-pronounced actions, including those located: in dialogs, in cards. In cards, text buttons help maintain an emphasis on card content.
- Outlined buttons: are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app.
vue
<template>
<MButton label="Filled" />
<MButton label="Text" variant="text" />
<MButton label="outlined" variant="outlined" />
<MButton label="Filled-rounded" rounded />
<MButton label="Text-rounded" variant="text" rounded />
<MButton label="outlined-rounded" variant="outlined" rounded />
</template>Severity
Severity defines the type of MButton.
The MButton comes in seven severity: primary (default), secondary, success, info, warning, help and danger.
Primary
vue
<template>
<MButton label="Primary" />
<MButton label="Primary" variant="text" />
<MButton label="Primary" variant="outlined" />
<MButton label="Primary" rounded />
<MButton label="Primary" variant="text" rounded />
<MButton label="Primary" variant="outlined" rounded />
</template>Secondary
vue
<template>
<MButton label="Secondary" severity="secondary" />
<MButton label="Secondary" variant="text" severity="secondary" />
<MButton label="Secondary" variant="outlined" severity="secondary" />
<MButton label="Secondary" severity="secondary" rounded />
<MButton label="Secondary" variant="text" severity="secondary" rounded />
<MButton label="Secondary" variant="outlined" severity="secondary" rounded />
</template>Success
vue
<template>
<MButton label="Success" severity="success" />
<MButton label="Success" variant="text" severity="success" />
<MButton label="Success" variant="outlined" severity="success" />
<MButton label="Success" severity="success" rounded />
<MButton label="Success" variant="text" severity="success" rounded />
<MButton label="Success" variant="outlined" severity="success" rounded />
</template>Info
vue
<template>
<MButton label="Info" severity="info" />
<MButton label="Info" variant="text" severity="info" />
<MButton label="Info" variant="outlined" severity="info" />
<MButton label="Info" severity="info" rounded />
<MButton label="Info" variant="text" severity="info" rounded />
<MButton label="Info" variant="outlined" severity="info" rounded />
</template>Warning
vue
<template>
<MButton label="Warning" severity="warning" />
<MButton label="Warning" variant="text" severity="warning" />
<MButton label="Warning" variant="outlined" severity="warning" />
<MButton label="Warning" severity="warning" rounded />
<MButton label="Warning" variant="text" severity="warning" rounded />
<MButton label="Warning" variant="outlined" severity="warning" rounded />
</template>Help
vue
<template>
<MButton label="Help" severity="help" />
<MButton label="Help" variant="text" severity="help" />
<MButton label="Help" variant="outlined" severity="help" />
<MButton label="Help" severity="help" rounded />
<MButton label="Help" variant="text" severity="help" rounded />
<MButton label="Help" variant="outlined" severity="help" rounded />
</template>Danger
vue
<template>
<MButton label="Danger" severity="danger" />
<MButton label="Danger" variant="text" severity="danger" />
<MButton label="Danger" variant="outlined" severity="danger" />
<MButton label="Danger" severity="danger" rounded />
<MButton label="Danger" variant="text" severity="danger" rounded />
<MButton label="Danger" variant="outlined" severity="danger" rounded />
</template>Loading
When loading is present only the loading icon will appear, the element cannot be focused and cursor is loading. The icon spinning animation is handled automatically.
vue
<template>
<MButton loadingIcon="pi pi-spinner" label="Submit" loading />
<MButton loadingIcon="pi pi-cog" label="Submit" loading />
</template>Raised
When raised is present, MButton has a shadow to indicate elevation.
vue
<template>
<MButton label="Primary" raised />
<MButton label="Primary" variant="text" raised />
<MButton label="Primary" variant="outlined" raised />
<MButton label="Primary" rounded raised />
<MButton label="Primary" variant="text" rounded raised />
<MButton label="Primary" variant="outlined" rounded raised />
</template>Icon only
MButton can have icons without labels.
vue
<template>
<!-- Filled Buttons -->
<div>
<MButton icon="pi pi-check" aria-label="Filter" title="Filter" />
<MButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" title="Bookmark" />
<MButton icon="pi pi-search" severity="success" aria-label="Search" title="Search" />
<MButton icon="pi pi-user" severity="info" aria-label="User" title="User" />
<MButton icon="pi pi-bell" severity="warning" aria-label="Notification" title="Notification" />
<MButton icon="pi pi-heart" severity="help" aria-label="Favorite" title="Favorite" />
<MButton icon="pi pi-times" severity="danger" aria-label="Cancel" title="Cancel" />
</div>
<!-- Filled Rounded Buttons -->
<div>
<MButton icon="pi pi-check" aria-label="Filter" title="Filter" rounded />
<MButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" title="Bookmark" rounded />
<MButton icon="pi pi-search" severity="success" aria-label="Search" title="Search" rounded />
<MButton icon="pi pi-user" severity="info" aria-label="User" title="User" rounded />
<MButton icon="pi pi-bell" severity="warning" aria-label="Notification" title="Notification" rounded />
<MButton icon="pi pi-heart" severity="help" aria-label="Favorite" title="Favorite" rounded />
<MButton icon="pi pi-times" severity="danger" aria-label="Cancel" title="Cancel" rounded />
</div>
<!-- Filled Raised Buttons -->
<div>
<MButton icon="pi pi-check" aria-label="Filter" title="Filter" raised />
<MButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" title="Bookmark" raised />
<MButton icon="pi pi-search" severity="success" aria-label="Search" title="Search" raised />
<MButton icon="pi pi-user" severity="info" aria-label="User" title="User" raised />
<MButton icon="pi pi-bell" severity="warning" aria-label="Notification" title="Notification" raised />
<MButton icon="pi pi-heart" severity="help" aria-label="Favorite" title="Favorite" raised />
<MButton icon="pi pi-times" severity="danger" aria-label="Cancel" title="Cancel" raised />
</div>
<!-- Filled Rounded Raised Buttons -->
<div>
<MButton icon="pi pi-check" aria-label="Filter" title="Filter" rounded raised />
<MButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" title="Bookmark" rounded raised />
<MButton icon="pi pi-search" severity="success" aria-label="Search" title="Search" rounded raised />
<MButton icon="pi pi-user" severity="info" aria-label="User" title="User" rounded raised />
<MButton icon="pi pi-bell" severity="warning" aria-label="Notification" title="Notification" rounded raised />
<MButton icon="pi pi-heart" severity="help" aria-label="Favorite" title="Favorite" rounded raised />
<MButton icon="pi pi-times" severity="danger" aria-label="Cancel" title="Cancel" rounded raised />
</div>
<!-- Text Buttons -->
<div>
<MButton icon="pi pi-check" variant="text" aria-label="Filter" title="Filter" />
<MButton icon="pi pi-bookmark" variant="text" severity="secondary" aria-label="Bookmark" title="Bookmark" />
<MButton icon="pi pi-search" variant="text" severity="success" aria-label="Search" title="Search" />
<MButton icon="pi pi-user" variant="text" severity="info" aria-label="User" title="User" />
<MButton icon="pi pi-bell" variant="text" severity="warning" aria-label="Notification" title="Notification" />
<MButton icon="pi pi-heart" variant="text" severity="help" aria-label="Favorite" title="Favorite" />
<MButton icon="pi pi-times" variant="text" severity="danger" aria-label="Cancel" title="Cancel" />
</div>
<!-- Text Rounded Buttons -->
<div>
<MButton icon="pi pi-check" variant="text" aria-label="Filter" title="Filter" rounded />
<MButton icon="pi pi-bookmark" variant="text" severity="secondary" aria-label="Bookmark" title="Bookmark" rounded />
<MButton icon="pi pi-search" variant="text" severity="success" aria-label="Search" title="Search" rounded />
<MButton icon="pi pi-user" variant="text" severity="info" aria-label="User" title="User" rounded />
<MButton icon="pi pi-bell" variant="text" severity="warning" aria-label="Notification" title="Notification" rounded />
<MButton icon="pi pi-heart" variant="text" severity="help" aria-label="Favorite" title="Favorite" rounded />
<MButton icon="pi pi-times" variant="text" severity="danger" aria-label="Cancel" title="Cancel" rounded />
</div>
<!-- Text Raised Buttons -->
<div>
<MButton icon="pi pi-check" variant="text" aria-label="Filter" title="Filter" raised />
<MButton icon="pi pi-bookmark" variant="text" severity="secondary" aria-label="Bookmark" title="Bookmark" raised />
<MButton icon="pi pi-search" variant="text" severity="success" aria-label="Search" title="Search" raised />
<MButton icon="pi pi-user" variant="text" severity="info" aria-label="User" title="User" raised />
<MButton icon="pi pi-bell" variant="text" severity="warning" aria-label="Notification" title="Notification" raised />
<MButton icon="pi pi-heart" variant="text" severity="help" aria-label="Favorite" title="Favorite" raised />
<MButton icon="pi pi-times" variant="text" severity="danger" aria-label="Cancel" title="Cancel" raised />
</div>
<!-- Text Rounded Raised Buttons -->
<div>
<MButton icon="pi pi-check" variant="text" aria-label="Filter" title="Filter" rounded raised />
<MButton icon="pi pi-bookmark" variant="text" severity="secondary" aria-label="Bookmark" title="Bookmark" rounded raised />
<MButton icon="pi pi-search" variant="text" severity="success" aria-label="Search" title="Search" rounded raised />
<MButton icon="pi pi-user" variant="text" severity="info" aria-label="User" title="User" rounded raised />
<MButton icon="pi pi-bell" variant="text" severity="warning" aria-label="Notification" title="Notification" rounded raised />
<MButton icon="pi pi-heart" variant="text" severity="help" aria-label="Favorite" title="Favorite" rounded raised />
<MButton icon="pi pi-times" variant="text" severity="danger" aria-label="Cancel" title="Cancel" rounded raised />
</div>
<!-- Outlined Buttons -->
<div>
<MButton icon="pi pi-check" variant="outlined" aria-label="Filter" title="Filter" />
<MButton icon="pi pi-bookmark" variant="outlined" severity="secondary" aria-label="Bookmark" title="Bookmark" />
<MButton icon="pi pi-search" variant="outlined" severity="success" aria-label="Search" title="Search" />
<MButton icon="pi pi-user" variant="outlined" severity="info" aria-label="User" title="User" />
<MButton icon="pi pi-bell" variant="outlined" severity="warning" aria-label="Notification" title="Notification" />
<MButton icon="pi pi-heart" variant="outlined" severity="help" aria-label="Favorite" title="Favorite" />
<MButton icon="pi pi-times" variant="outlined" severity="danger" aria-label="Cancel" title="Cancel" />
</div>
<!-- Outlined Rounded Buttons -->
<div>
<MButton icon="pi pi-check" variant="outlined" aria-label="Filter" title="Filter" rounded />
<MButton icon="pi pi-bookmark" variant="outlined" severity="secondary" aria-label="Bookmark" title="Bookmark" rounded />
<MButton icon="pi pi-search" variant="outlined" severity="success" aria-label="Search" title="Search" rounded />
<MButton icon="pi pi-user" variant="outlined" severity="info" aria-label="User" title="User" rounded />
<MButton icon="pi pi-bell" variant="outlined" severity="warning" aria-label="Notification" title="Notification" rounded />
<MButton icon="pi pi-heart" variant="outlined" severity="help" aria-label="Favorite" title="Favorite" rounded />
<MButton icon="pi pi-times" variant="outlined" severity="danger" aria-label="Cancel" title="Cancel" rounded />
</div>
<!-- Outlined Raised Buttons -->
<div>
<MButton icon="pi pi-check" variant="outlined" aria-label="Filter" title="Filter" raised />
<MButton icon="pi pi-bookmark" variant="outlined" severity="secondary" aria-label="Bookmark" title="Bookmark" raised />
<MButton icon="pi pi-search" variant="outlined" severity="success" aria-label="Search" title="Search" raised />
<MButton icon="pi pi-user" variant="outlined" severity="info" aria-label="User" title="User" raised />
<MButton icon="pi pi-bell" variant="outlined" severity="warning" aria-label="Notification" title="Notification" raised />
<MButton icon="pi pi-heart" variant="outlined" severity="help" aria-label="Favorite" title="Favorite" raised />
<MButton icon="pi pi-times" variant="outlined" severity="danger" aria-label="Cancel" title="Cancel" raised />
</div>
<!-- Outlined Rounded Raised Buttons -->
<div>
<MButton icon="pi pi-check" variant="outlined" aria-label="Filter" title="Filter" rounded raised />
<MButton icon="pi pi-bookmark" variant="outlined" severity="secondary" aria-label="Bookmark" title="Bookmark" rounded raised />
<MButton icon="pi pi-search" variant="outlined" severity="success" aria-label="Search" title="Search" rounded raised />
<MButton icon="pi pi-user" variant="outlined" severity="info" aria-label="User" title="User" rounded raised />
<MButton icon="pi pi-bell" variant="outlined" severity="warning" aria-label="Notification" title="Notification" rounded raised />
<MButton icon="pi pi-heart" variant="outlined" severity="help" aria-label="Favorite" title="Favorite" rounded raised />
<MButton icon="pi pi-times" variant="outlined" severity="danger" aria-label="Cancel" title="Cancel" rounded raised />
</div>
</template>Sizes
For larger or smaller MButtons, use the size property. The MButton comes in three sizes: sm, md (default) and lg.
vue
<template>
<MButton label="Small" size="sm" />
<MButton label="Medium" />
<MButton label="Large" size="lg" />
</template>Events
OnClick
By default MButton stops event propagation.
When propagate is present, the event propagates normally.
vue
<template>
<MButton label="Submit" propagate />
</template>Accessibility
MButton component renders a native button element that implicitly includes any passed prop.
Title
title property can be used in order to provide further information to the user on hover, if not present label prop is used as the value.
vue
<template>
<MButton label="Submit" />
<MButton label="Submit" title="Custom title" />
</template>Screen Reader
Text to describe MButton is defined with the aria-label prop, if not present label prop is used as the value. If the MButton is icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly.
vue
<template>
<MButton icon="pi pi-check" />
<MButton icon="pi pi-check" label="Submit" />
<MButton aria-label="Submit">Submit</MButton>
</template>:::
Keyboard Support
| Key | Function |
|---|---|
Tab | Moves focus to the MButton. |
Space | Activates the MButton. |
Enter | Activates the MButton. |