Button

Trigger actions when clicked.

Import

import { MpButton, MpButtonGroup } from '@mekari/pixel3'

Playground

API

MpButton

Props

Events

Slots

Name	Type	Default
as Rendered tag of button.	string	button
size Size of button.	sm | md	md
variant Variant of button.	primary | secondary | ghost | danger | textLink	primary
is-disabled If true, button will be disable.	boolean	false
is-loading If true, button will be show loading state.	boolean	false
left-icon Show icon on the left or create button icon.	IconName	-
right-icon Show icon on the right or create button icon.	IconName	-
is-full-width If true, button will have full width.	boolean	false
is-rounded If true, button will have rounded corners.	boolean	false

MpButtonGroup

Props

Slots

Name	Type	Default
spacing Spacing of button in group.	SpacingToken | string	2
is-split Visual state of split button in group.	boolean	false

Usage

Variant

Size

With Icon

Button Icon

Button Group

Button Rounded

Other

Accessibility

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/button/

• Provide aria-label and or aria-labelledby when use Button Icon.
• When disabled, button has aria-disabled set to true.
• When focused, pressing Space or Enter key for activate state of button.