Buttons
The e-button component offers a variety of button types and sizes to meet your design needs. There are lots of button types for the best fits design of your application.
Button Sizes Variant
Here are the available size options: x-small small large x-large
<template>
<e-button x-small> x-small </e-button>
<e-button small> small </e-button>
<e-button> default </e-button>
<e-button large> large </e-button>
<e-button x-large> x-large </e-button>
</template>
Icon
Using the icon property property you can transform the layout of the component. You can learn more about how icons work on the Icons page
<template">
<e-button x-small :icon="iconSend" />
<e-button small :icon="iconSend" />
<e-button :icon="iconSend" />
<e-button large :icon="iconSend" />
<e-button x-large :icon="iconSend" />
<e-button text x-small icon="music" />
<e-button text small icon="music" />
<e-button text icon="music" />
<e-button text large icon="music" />
<e-button text x-large icon="music" />
</template>
import { IconPath } from "drocket";
const iconSend: IconPath = {
title: "send",
d: "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z",
};
Prepend and Append icons
You have the flexibility to position icons on either the left or right side of the button.
<template>
<e-button prepend-icon="delete">Delete</e-button>
<e-button prepend-icon="send">Send</e-button>
<e-button prepend-icon="alert" color="warning">warning</e-button>
<e-button append-icon="alertBox">Stop</e-button>
</template>
Custom icon size
Using width or height you can change the default size of the component
<template>
<e-button width="150">width:150px</e-button>
<e-button width="200">width: 100px</e-button>
<e-button height="60">height: 60px</e-button>
<e-button height="70">height: 70px</e-button>
</template>
API Reference
Props
Explore the available props for the form component
| Property | Description | Type | Default |
|---|---|---|---|
| disabled | change button style and removes the ability to click or target the component. | boolean | false |
| to | Denotes the target route of the link. | RouteLocationRaw | false |
| append-icon | name or configuration of the icon to be displayed to the right of the component | Array IconPath string | undefined |
| prepend-icon | name or configuration of the icon to be displayed to the left of the component | Array IconPath string | undefined |
| icon | icon name to be rendered inside the button. | string | null |
| ripple | Applies the v-ripple directive. | boolean | false |
| color | Applies specified color to the component - supports only utility colors (for example primary or secondary) | string | undefined |
| loading | change button style and shows a loading icon. | boolean | false |
| stacked | Displays the button as a flex-column. | boolean | false |
| hover-color | Applies a specific color for the hover event to the component - supports only utility colors (for example primary or secondary) | string | undefined |
| depressed | remove the box-shadow property | boolean | false |
| text | removes the shadow from the component and inverts the color and background-color values | boolean | false |
| outlined | remove the box-shadow property and adds a border | boolean | false |
| text | removes the shadow from the component and inverts the color and background-color values | boolean | false |
| block | makes the component take up the entire width of the container | boolean | false |
| x-small | applies the size configured in the sass variables for the x-small value | boolean | false |
| small | applies the size configured in the sass variables for the small value | boolean | false |
| large | applies the size configured in the sass variables for the large value | boolean | false |
| x-large | applies the size configured in the sass variables for the x-large value | boolean | false |
| type | The type attribute specifies the type of button. | string | button |
| rounded | applies a predefined border-radius to the component. | boolean | false |
SASS Variables
| Name | Default |
|---|---|
| $btn-border-radius | $border-radius-root !default; |
| $btn-font-weight | 500 !default; |
| $btn-letter-spacing | 0.089em !default; |
| $btn-border-style | solid !default; |
| $btn-border-width | 2px !default; |
| $btn-rounded-border-radius | 28px !default; |
| $btn-text-transform | uppercase !default; |
| $btn-transition-duration | 0.28s !default; |
| $btn-states | map-merge( ( "focus": 0.05, "hover": 0.1, "active": 0.3, ),()) !default; |
| $btn-font-sizes | map-merge(
(
"x-small": 0.625rem,
"small": 0.75rem,
"default": 0.875rem,
"large": 0.875rem,
"x-large": 1rem,
), ()) !default;
|
| $btn-height | map-merge(
(
"x-small": 2.187rem,
"small": 2.5rem,
"default": 3rem,
"large": 3.125rem,
"x-large": 3.4375rem,
), ()) !default;
|
| $icon-font-sizes | map-merge(
(
"x-small": 1.25rem,
"small": 1.3rem,
"default": 1.625rem,
"large": 2rem,
"x-large": 2.375rem,
), ()) !default;
|