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

Fixed #7017 - Size support for Icon Only Buttons

pull/7064/merge
Cagatay Civici 2025-01-14 15:50:15 +03:00
parent 3b946a38d3
commit 0975f41110
7 changed files with 202 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>
`
}

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