vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge branch 'master' of https://github.com/primefaces/primevue

pull/7064/merge
tugcekucukoglu 2025-01-14 16:10:40 +03:00
parent ca1649d946 855994886a
commit 2f0062139b
9 changed files with 249 additions and 160 deletions
apps/showcase/doc
button
common/apidoc
packages
primevue/src/button/style
themes
src/presets
aura/button
lara/button
material/button
nora/button
types/button

281
apps/showcase/doc/button/IconOnlyDoc.vue
View File

@ -3,59 +3,62 @@
<p>Buttons can have icons without labels.</p>
</DocSectionText>
<div class="card">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" aria-label="Search" />
<Button icon="pi pi-user" severity="info" aria-label="User" />
<Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" aria-label="Star" />
<div class="flex justify-center mb-8">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
<Button icon="pi pi-check" aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
<Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
<Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4">
<Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
<Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
</div>
</div>
<DocSectionCode :code="code" />
@ -65,6 +68,12 @@
export default {
data() {
return {
size: 'normal',
sizeOptions: [
{ label: 'Small', value: 'small' },
{ label: 'Normal', value: 'normal' },
{ label: 'Large', value: 'large' }
],
code: {
basic: `
<Button icon="pi pi-check" aria-label="Filter" />
@ -115,127 +124,153 @@ export default {
options: `
<template>
<div class="card">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" aria-label="Search" />
<Button icon="pi pi-user" severity="info" aria-label="User" />
<Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" aria-label="Star" />
<div class="flex justify-center mb-8">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
<Button icon="pi pi-check" aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
<Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
<Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4">
<Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
<Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
size: 'normal',
sizeOptions: [
{ label: 'Small', value: 'small' },
{ label: 'Normal', value: 'normal' },
{ label: 'Large', value: 'large' }
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" aria-label="Search" />
<Button icon="pi pi-user" severity="info" aria-label="User" />
<Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" aria-label="Star" />
<div class="flex justify-center mb-8">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
<Button icon="pi pi-check" aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
<Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
<Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4">
<Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
<Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const size = ref('normal');
const sizeOptions = ref([
{ label: 'Small', value: 'small' },
{ label: 'Normal', value: 'normal' },
{ label: 'Large', value: 'large' }
]);
<\/script>
`
}

18
apps/showcase/doc/common/apidoc/index.json
View File

@ -76251,6 +76251,15 @@
"default": "",
"description": "Sm padding y of root"
},
{
"name": "sm.iconOnlyWidth",
"token": "button.sm.icon.only.width",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Sm icon only width of root"
},
{
"name": "lg.fontSize",
"token": "button.lg.font.size",
@ -76278,6 +76287,15 @@
"default": "",
"description": "Lg padding y of root"
},
{
"name": "lg.iconOnlyWidth",
"token": "button.lg.icon.only.width",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Lg icon only width of root"
},
{
"name": "label.fontWeight",
"token": "button.label.font.weight",

16
packages/primevue/src/button/style/ButtonStyle.js
View File

@ -69,6 +69,14 @@ const theme = ({ dt }) => `
font-size: ${dt('button.sm.font.size')};
}
.p-button-sm.p-button-icon-only {
width: ${dt('button.sm.icon.only.width')};
}
.p-button-sm.p-button-icon-only.p-button-rounded {
height: ${dt('button.sm.icon.only.width')};
}
.p-button-lg {
font-size: ${dt('button.lg.font.size')};
padding: ${dt('button.lg.padding.y')} ${dt('button.lg.padding.x')};
@ -78,6 +86,14 @@ const theme = ({ dt }) => `
font-size: ${dt('button.lg.font.size')};
}
.p-button-lg.p-button-icon-only {
width: ${dt('button.lg.icon.only.width')};
}
.p-button-lg.p-button-icon-only.p-button-rounded {
height: ${dt('button.lg.icon.only.width')};
}
.p-button-vertical {
flex-direction: column;
}

6
packages/themes/src/presets/aura/button/index.js
View File

@ -9,12 +9,14 @@ export default {
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
paddingY: '{form.field.sm.padding.y}',
iconOnlyWidth: '2rem'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
paddingY: '{form.field.lg.padding.y}',
iconOnlyWidth: '3rem'
},
label: {
fontWeight: '500'

6
packages/themes/src/presets/lara/button/index.js
View File

@ -9,12 +9,14 @@ export default {
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
paddingY: '{form.field.sm.padding.y}',
iconOnlyWidth: '2.25rem'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
paddingY: '{form.field.lg.padding.y}',
iconOnlyWidth: '3.25rem'
},
label: {
fontWeight: '600'

6
packages/themes/src/presets/material/button/index.js
View File

@ -9,12 +9,14 @@ export default {
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
paddingY: '{form.field.sm.padding.y}',
iconOnlyWidth: '2.5rem'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
paddingY: '{form.field.lg.padding.y}',
iconOnlyWidth: '3.5rem'
},
label: {
fontWeight: '500'

6
packages/themes/src/presets/nora/button/index.js
View File

@ -9,12 +9,14 @@ export default {
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
paddingY: '{form.field.sm.padding.y}',
iconOnlyWidth: '2rem'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
paddingY: '{form.field.lg.padding.y}',
iconOnlyWidth: '3rem'
},
label: {
fontWeight: '700'

12
packages/themes/types/button/index.d.ts vendored
View File

@ -73,6 +73,12 @@ export interface ButtonDesignTokens extends ColorSchemeDesignToken<ButtonDesignT
* @designToken button.sm.padding.y
*/
paddingY?: string;
/**
* Sm icon only width of root
*
* @designToken button.sm.icon.only.width
*/
iconOnlyWidth?: string;
};
/**
* Lg of root
@ -96,6 +102,12 @@ export interface ButtonDesignTokens extends ColorSchemeDesignToken<ButtonDesignT
* @designToken button.lg.padding.y
*/
paddingY?: string;
/**
* Lg icon only width of root
*
* @designToken button.lg.icon.only.width
*/
iconOnlyWidth?: string;
};
/**
* Label of root

58
pnpm-lock.yaml
View File

@ -4878,8 +4878,8 @@ packages:
resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
engines: {node: '>= 6'}
pkg-types@1.3.0:
resolution: {integrity: sha512-kS7yWjVFCkIw9hqdJBoMxDdzEngmkr5FXeWZZfQ6GoYacjVnsW6l2CcYW/0ThD0vF4LPJgVYnrg4d0uuhwYQbg==}
pkg-types@1.3.1:
resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
pluralize@8.0.0:
resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
@ -8253,7 +8253,7 @@ snapshots:
global-dirs: 3.0.1
magicast: 0.3.5
pathe: 1.1.2
pkg-types: 1.3.0
pkg-types: 1.3.1
prompts: 2.4.2
rc9: 2.1.2
semver: 7.6.3
@ -8286,7 +8286,7 @@ snapshots:
pacote: 17.0.7
pathe: 1.1.2
perfect-debounce: 1.0.0
pkg-types: 1.3.0
pkg-types: 1.3.1
rc9: 2.1.2
semver: 7.6.3
simple-git: 3.27.0
@ -8331,7 +8331,7 @@ snapshots:
mlly: 1.7.4
ohash: 1.1.4
pathe: 2.0.1
pkg-types: 1.3.0
pkg-types: 1.3.1
scule: 1.3.0
semver: 7.6.3
ufo: 1.5.4
@ -8358,7 +8358,7 @@ snapshots:
mlly: 1.7.4
ohash: 1.1.4
pathe: 2.0.1
pkg-types: 1.3.0
pkg-types: 1.3.1
scule: 1.3.0
semver: 7.6.3
ufo: 1.5.4
@ -8384,7 +8384,7 @@ snapshots:
lodash.template: 4.5.0
mlly: 1.7.4
pathe: 1.1.2
pkg-types: 1.3.0
pkg-types: 1.3.1
scule: 1.3.0
semver: 7.6.3
unctx: 2.4.1
@ -8409,7 +8409,7 @@ snapshots:
lodash.template: 4.5.0
mlly: 1.7.4
pathe: 1.1.2
pkg-types: 1.3.0
pkg-types: 1.3.1
scule: 1.3.0
semver: 7.6.3
unctx: 2.4.1
@ -8430,7 +8430,7 @@ snapshots:
mlly: 1.7.4
nuxi: 3.3.2
pathe: 1.1.2
pkg-types: 1.3.0
pkg-types: 1.3.1
tsconfck: 3.1.4(typescript@5.7.3)
unbuild: 2.0.0(typescript@5.7.3)
transitivePeerDependencies:
@ -8454,7 +8454,7 @@ snapshots:
hookable: 5.5.3
jiti: 1.21.7
pathe: 1.1.2
pkg-types: 1.3.0
pkg-types: 1.3.1
postcss-import-resolver: 2.0.0
scule: 1.3.0
std-env: 3.8.0
@ -8474,7 +8474,7 @@ snapshots:
hookable: 5.5.3
jiti: 1.21.7
pathe: 1.1.2
pkg-types: 1.3.0
pkg-types: 1.3.1
postcss-import-resolver: 2.0.0
scule: 1.3.0
std-env: 3.8.0
@ -8600,7 +8600,7 @@ snapshots:
ohash: 1.1.4
pathe: 1.1.2
perfect-debounce: 0.1.3
pkg-types: 1.3.0
pkg-types: 1.3.1
postcss: 8.5.1
postcss-import: 15.1.0(postcss@8.5.1)
postcss-url: 10.1.3(postcss@8.5.1)
@ -8659,7 +8659,7 @@ snapshots:
ohash: 1.1.4
pathe: 1.1.2
perfect-debounce: 0.1.3
pkg-types: 1.3.0
pkg-types: 1.3.1
postcss: 8.5.1
postcss-import: 15.1.0(postcss@8.5.1)
postcss-url: 10.1.3(postcss@8.5.1)
@ -9858,7 +9858,7 @@ snapshots:
ohash: 1.1.4
pathe: 1.1.2
perfect-debounce: 1.0.0
pkg-types: 1.3.0
pkg-types: 1.3.1
rc9: 2.1.2
optionalDependencies:
magicast: 0.3.5
@ -9875,7 +9875,7 @@ snapshots:
ohash: 1.1.4
pathe: 1.1.2
perfect-debounce: 1.0.0
pkg-types: 1.3.0
pkg-types: 1.3.1
rc9: 2.1.2
optionalDependencies:
magicast: 0.3.5
@ -9940,7 +9940,7 @@ snapshots:
ofetch: 1.4.1
open: 10.1.0
pathe: 1.1.2
pkg-types: 1.3.0
pkg-types: 1.3.1
scule: 1.3.0
semver: 7.6.3
std-env: 3.8.0
@ -11444,12 +11444,12 @@ snapshots:
local-pkg@0.5.1:
dependencies:
mlly: 1.7.4
pkg-types: 1.3.0
pkg-types: 1.3.1
local-pkg@1.0.0:
dependencies:
mlly: 1.7.4
pkg-types: 1.3.0
pkg-types: 1.3.1
locate-path@6.0.0:
dependencies:
@ -11684,7 +11684,7 @@ snapshots:
jiti: 1.21.7
mlly: 1.7.4
pathe: 1.1.2
pkg-types: 1.3.0
pkg-types: 1.3.1
postcss: 8.5.1
postcss-nested: 6.2.0(postcss@8.5.1)
semver: 7.6.3
@ -11696,7 +11696,7 @@ snapshots:
dependencies:
acorn: 8.14.0
pathe: 2.0.1
pkg-types: 1.3.0
pkg-types: 1.3.1
ufo: 1.5.4
mri@1.2.0: {}
@ -11773,7 +11773,7 @@ snapshots:
openapi-typescript: 7.5.2(encoding@0.1.13)(typescript@5.7.3)
pathe: 1.1.2
perfect-debounce: 1.0.0
pkg-types: 1.3.0
pkg-types: 1.3.1
pretty-bytes: 6.1.1
radix3: 1.1.2
rollup: 4.30.1
@ -11863,7 +11863,7 @@ snapshots:
ohash: 1.1.4
pathe: 1.1.2
perfect-debounce: 0.1.3
pkg-types: 1.3.0
pkg-types: 1.3.1
pretty-bytes: 6.1.1
radix3: 1.1.2
rollup: 3.29.5
@ -12202,7 +12202,7 @@ snapshots:
consola: 3.4.0
execa: 8.0.1
pathe: 1.1.2
pkg-types: 1.3.0
pkg-types: 1.3.1
ufo: 1.5.4
object-assign@4.1.1: {}
@ -12406,11 +12406,11 @@ snapshots:
pirates@4.0.6: {}
pkg-types@1.3.0:
pkg-types@1.3.1:
dependencies:
confbox: 0.1.8
mlly: 1.7.4
pathe: 1.1.2
pathe: 2.0.1
pluralize@8.0.0: {}
@ -13708,7 +13708,7 @@ snapshots:
mkdist: 1.6.0(typescript@5.7.3)
mlly: 1.7.4
pathe: 1.1.2
pkg-types: 1.3.0
pkg-types: 1.3.1
pretty-bytes: 6.1.1
rollup: 3.29.5
rollup-plugin-dts: 6.1.1(rollup@3.29.5)(typescript@5.7.3)
@ -13772,7 +13772,7 @@ snapshots:
mlly: 1.7.4
pathe: 2.0.1
picomatch: 4.0.2
pkg-types: 1.3.0
pkg-types: 1.3.1
scule: 1.3.0
strip-literal: 2.1.1
unplugin: 1.16.1
@ -13791,7 +13791,7 @@ snapshots:
mlly: 1.7.4
pathe: 2.0.1
picomatch: 4.0.2
pkg-types: 1.3.0
pkg-types: 1.3.1
scule: 1.3.0
strip-literal: 2.1.1
unplugin: 1.16.1
@ -13881,7 +13881,7 @@ snapshots:
magic-string: 0.30.17
mlly: 1.7.4
pathe: 1.1.2
pkg-types: 1.3.0
pkg-types: 1.3.1
unplugin: 1.16.1
update-browserslist-db@1.1.2(browserslist@4.24.4):