Components
Button
Triggers an action, or navigates when given an href. Includes ButtonGroupComponent for joined buttons and ButtonMenuContainerComponent for toolbars.
import { ButtonComponent, ButtonGroupComponent, ButtonMenuContainerComponent } from '@/MigsLab/shared'
Colors
<ButtonComponent color="primary" rounded @click="Save_Click">Primary</ButtonComponent>
<ButtonComponent color="secondary" rounded>Secondary</ButtonComponent>
<ButtonComponent color="danger" rounded>Danger</ButtonComponent>
<ButtonComponent color="ghost" rounded>Ghost</ButtonComponent>Variants
<ButtonComponent outlined rounded>Outlined</ButtonComponent>
<ButtonComponent color="ghost" bordered rounded>Bordered ghost</ButtonComponent>
<ButtonComponent rounded disabled>Disabled</ButtonComponent>
<ButtonComponent color="secondary" href="https://vuejs.org" target="_blank">Link</ButtonComponent>Sizes
<ButtonComponent size="sm">Small</ButtonComponent>
<ButtonComponent size="md">Medium</ButtonComponent>
<ButtonComponent size="lg">Large</ButtonComponent>Button group
Joins adjacent buttons into one control.
<ButtonGroupComponent>
<ButtonComponent color="secondary" bordered>Day</ButtonComponent>
<ButtonComponent color="primary" bordered>Week</ButtonComponent>
<ButtonComponent color="secondary" bordered>Month</ButtonComponent>
</ButtonGroupComponent>Button menu container
A bordered toolbar for a row of related actions.
<ButtonMenuContainerComponent>
<ButtonComponent color="ghost" size="sm" rounded>New</ButtonComponent>
<ButtonComponent color="ghost" size="sm" rounded>Edit</ButtonComponent>
</ButtonMenuContainerComponent>Last clicked: none
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
color | 'primary' | 'secondary' | 'danger' | 'ghost' | 'primary' | Color variant. |
size | 'sm' | 'md' | 'lg' | 'md' | Padding and font size. |
type | 'button' | 'submit' | 'reset' | 'button' | Native button type. Ignored when href is set. |
outlined | boolean | false | Transparent background with a colored border and text. |
bordered | boolean | false | Adds a neutral border. |
rounded | boolean | false | Larger corner radius. |
disabled | boolean | false | Disables the button (or link) and blocks click events. |
href | string | undefined | Renders an <a> instead of a <button>. |
Events
| Event | Payload | Description |
|---|---|---|
click | MouseEvent | Emitted on click unless disabled. |