Button
The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.
Portábilis UI provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.
Overview
HTML
<x-button [...props] />1
typescript
interface UseButtonClassesProps {
as?: ButtonAsVariant;
href?: string;
target?: string;
to?: string | Record<string, unknown>;
label?: string | number;
icon?: string;
iconRight?: string;
round?: boolean;
flat?: boolean;
rounded?: boolean;
size?: ButtonSize;
fab?: boolean;
fabMini?: boolean;
padding?: string;
color?: ButtonDefaultColors;
textColor?: string;
noCaps?: boolean;
noWrap?: boolean;
tabindex?: number | string;
loading?: boolean;
variant?: ButtonVariant;
loadingNormal?: boolean;
square?: boolean;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Colors
typescript
type ButtonDefaultColors =
| 'standard'
| 'primary'
| 'secondary'
| 'accent'
| 'success'
| 'danger'
| 'warning'
| 'info';
defineProps({
color: {
type: String as PropType<ButtonDefaultColors>,
default: 'standard',
},
});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Outline
typescript
type ButtonVariant = 'default' | 'outline' | 'flat';
defineProps({
variant: {
type: String as PropType<ButtonVariant>,
default: 'default',
},
});1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Square
typescript
defineProps({
square: {
type: Boolean as PropType<boolean>,
default: false,
},
});1
2
3
4
5
6
2
3
4
5
6
Flat
typescript
type ButtonVariant = 'default' | 'outline' | 'flat';
defineProps({
variant: {
type: String as PropType<ButtonVariant>,
default: 'default',
},
});1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
With icon
typescript
defineProps({
icon: {
type: String as PropType<string>,
default: '',
},
iconRight: {
type: String as PropType<string>,
default: '',
},
});1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Round
typescript
defineProps({
round: {
type: Boolean as PropType<boolean>,
default: false,
},
});1
2
3
4
5
6
2
3
4
5
6
Rounded
typescript
defineProps({
rounded: {
type: Boolean as PropType<boolean>,
default: false,
},
});1
2
3
4
5
6
2
3
4
5
6
Custom content
Size
typescript
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
defineProps({
size: {
type: String as PropType<ButtonSize>,
default: 'md',
},
});1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Padding
typescript
defineProps({
padding: {
type: String as PropType<string>,
default: '',
},
});1
2
3
4
5
6
2
3
4
5
6
Progress
typescript
defineProps({
loading: {
type: Boolean as PropType<boolean>,
default: false,
},
loadingNormal: {
type: Boolean as PropType<boolean>,
default: false,
},
});1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10