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

Fixed #6658 - Add variant prop to Button

pull/6674/head
Cagatay Civici 2024-10-28 14:53:33 +03:00
parent 3a676127cf
commit a8b01e31a4
12 changed files with 221 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/button/BadgeDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-center flex-wrap gap-4"> <div class="card flex justify-center flex-wrap gap-4">
<Button type="button" label="Emails" badge="2" /> <Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined /> <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -16,13 +16,13 @@ export default {
code: { code: {
basic: ` basic: `
<Button type="button" label="Emails" badge="2" /> <Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined /> <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center flex-wrap gap-4"> <div class="card flex justify-center flex-wrap gap-4">
<Button type="button" label="Emails" badge="2" /> <Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined /> <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
</div> </div>
</template> </template>
@ -33,7 +33,7 @@ export default {
<template> <template>
<div class="card flex justify-center flex-wrap gap-4"> <div class="card flex justify-center flex-wrap gap-4">
<Button type="button" label="Emails" badge="2" /> <Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined /> <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
</div> </div>
</template> </template>

2
apps/showcase/doc/button/DisabledDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p> <p>When <i>disabled</i> is present, the element cannot be used.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button label="Submit" disabled /> <Button label="Submit" disabled />

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

@ -26,36 +26,36 @@
</div> </div>
<div class="flex flex-wrap justify-center gap-4 mb-6"> <div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded outlined aria-label="Filter" /> <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" /> <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" /> <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded outlined aria-label="Notification" /> <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" /> <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" /> <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded outlined aria-label="Star" /> <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
</div> </div>
<div class="flex flex-wrap justify-center gap-4 mb-6"> <div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" text raised rounded aria-label="Filter" /> <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" /> <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" /> <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" /> <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" text raised rounded aria-label="Notification" /> <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" /> <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" /> <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" text raised rounded aria-label="Star" /> <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
</div> </div>
<div class="flex flex-wrap justify-center gap-4"> <div class="flex flex-wrap justify-center gap-4">
<Button icon="pi pi-check" text rounded aria-label="Filter" /> <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" /> <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" /> <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" text rounded aria-label="User" /> <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" text rounded aria-label="Notification" /> <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" /> <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" /> <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" text rounded aria-label="Star" /> <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -85,32 +85,32 @@ export default {
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" /> <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-star" severity="contrast" rounded aria-label="Star" />
<Button icon="pi pi-check" rounded outlined aria-label="Filter" /> <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" /> <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" /> <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded outlined aria-label="Notification" /> <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" /> <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" /> <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded outlined aria-label="Star" /> <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
<Button icon="pi pi-check" text raised rounded aria-label="Filter" /> <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" /> <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" /> <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" /> <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" text raised rounded aria-label="Notification" /> <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" /> <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" /> <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" text raised rounded aria-label="Star" /> <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
<Button icon="pi pi-check" text rounded aria-label="Filter" /> <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" /> <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" /> <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" text rounded aria-label="User" /> <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" text rounded aria-label="Notification" /> <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" /> <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" /> <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" text rounded aria-label="Star" /> <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
`, `,
options: ` options: `
<template> <template>
@ -138,36 +138,36 @@ export default {
</div> </div>
<div class="flex flex-wrap justify-center gap-4 mb-6"> <div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded outlined aria-label="Filter" /> <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" /> <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" /> <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded outlined aria-label="Notification" /> <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" /> <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" /> <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded outlined aria-label="Star" /> <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
</div> </div>
<div class="flex flex-wrap justify-center gap-4 mb-6"> <div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" text raised rounded aria-label="Filter" /> <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" /> <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" /> <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" /> <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" text raised rounded aria-label="Notification" /> <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" /> <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" /> <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" text raised rounded aria-label="Star" /> <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
</div> </div>
<div class="flex flex-wrap justify-center gap-4"> <div class="flex flex-wrap justify-center gap-4">
<Button icon="pi pi-check" text rounded aria-label="Filter" /> <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" /> <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" /> <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" text rounded aria-label="User" /> <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" text rounded aria-label="Notification" /> <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" /> <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" /> <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" text rounded aria-label="Star" /> <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
</div> </div>
</div> </div>
</template> </template>
@ -201,36 +201,36 @@ export default {
</div> </div>
<div class="flex flex-wrap justify-center gap-4 mb-6"> <div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded outlined aria-label="Filter" /> <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" /> <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" /> <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded outlined aria-label="Notification" /> <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" /> <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" /> <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded outlined aria-label="Star" /> <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
</div> </div>
<div class="flex flex-wrap justify-center gap-4 mb-6"> <div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" text raised rounded aria-label="Filter" /> <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" /> <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" /> <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" /> <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" text raised rounded aria-label="Notification" /> <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" /> <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" /> <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" text raised rounded aria-label="Star" /> <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
</div> </div>
<div class="flex flex-wrap justify-center gap-4"> <div class="flex flex-wrap justify-center gap-4">
<Button icon="pi pi-check" text rounded aria-label="Filter" /> <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" /> <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" /> <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" text rounded aria-label="User" /> <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" text rounded aria-label="Notification" /> <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" /> <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" /> <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" text rounded aria-label="Star" /> <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
</div> </div>
</div> </div>
</template> </template>

8
apps/showcase/doc/button/LinkDoc.vue
View File

@ -3,7 +3,7 @@
<p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to use buttons for actual navigations, use the <i>as</i> property to customize the rendered element.</p> <p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to use buttons for actual navigations, use the <i>as</i> property to customize the rendered element.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center gap-4"> <div class="card flex justify-center gap-4">
<Button label="Link" link /> <Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" /> <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" /> <Button as="router-link" label="Router" to="/" />
</div> </div>
@ -16,14 +16,14 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Button label="Link" link /> <Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" /> <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" /> <Button as="router-link" label="Router" to="/" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center gap-4"> <div class="card flex justify-center gap-4">
<Button label="Link" link /> <Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" /> <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" /> <Button as="router-link" label="Router" to="/" />
</div> </div>
@ -35,7 +35,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center gap-4"> <div class="card flex justify-center gap-4">
<Button label="Link" link /> <Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" /> <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" /> <Button as="router-link" label="Router" to="/" />
</div> </div>

66
apps/showcase/doc/button/OutlinedDoc.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Outlined buttons display a border without a background initially.</p> <p>Outlined buttons display a border without a transparent background.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center flex-wrap gap-4"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" outlined /> <Button label="Primary" variant="outlined" />
<Button label="Secondary" severity="secondary" outlined /> <Button label="Secondary" severity="secondary" variant="outlined" />
<Button label="Success" severity="success" outlined /> <Button label="Success" severity="success" variant="outlined" />
<Button label="Info" severity="info" outlined /> <Button label="Info" severity="info" variant="outlined" />
<Button label="Warn" severity="warn" outlined /> <Button label="Warn" severity="warn" variant="outlined" />
<Button label="Help" severity="help" outlined /> <Button label="Help" severity="help" variant="outlined" />
<Button label="Danger" severity="danger" outlined /> <Button label="Danger" severity="danger" variant="outlined" />
<Button label="Contrast" severity="contrast" outlined /> <Button label="Contrast" severity="contrast" variant="outlined" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -21,26 +21,26 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Button label="Primary" outlined /> <Button label="Primary" variant="outlined" />
<Button label="Secondary" severity="secondary" outlined /> <Button label="Secondary" severity="secondary" variant="outlined" />
<Button label="Success" severity="success" outlined /> <Button label="Success" severity="success" variant="outlined" />
<Button label="Info" severity="info" outlined /> <Button label="Info" severity="info" variant="outlined" />
<Button label="Warn" severity="warn" outlined /> <Button label="Warn" severity="warn" variant="outlined" />
<Button label="Help" severity="help" outlined /> <Button label="Help" severity="help" variant="outlined" />
<Button label="Danger" severity="danger" outlined /> <Button label="Danger" severity="danger" variant="outlined" />
<Button label="Contrast" severity="contrast" outlined /> <Button label="Contrast" severity="contrast" variant="outlined" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center flex-wrap gap-4"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" outlined /> <Button label="Primary" variant="outlined" />
<Button label="Secondary" severity="secondary" outlined /> <Button label="Secondary" severity="secondary" variant="outlined" />
<Button label="Success" severity="success" outlined /> <Button label="Success" severity="success" variant="outlined" />
<Button label="Info" severity="info" outlined /> <Button label="Info" severity="info" variant="outlined" />
<Button label="Warn" severity="warn" outlined /> <Button label="Warn" severity="warn" variant="outlined" />
<Button label="Help" severity="help" outlined /> <Button label="Help" severity="help" variant="outlined" />
<Button label="Danger" severity="danger" outlined /> <Button label="Danger" severity="danger" variant="outlined" />
<Button label="Contrast" severity="contrast" outlined /> <Button label="Contrast" severity="contrast" variant="outlined" />
</div> </div>
</template> </template>
@ -50,14 +50,14 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center flex-wrap gap-4"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" outlined /> <Button label="Primary" variant="outlined" />
<Button label="Secondary" severity="secondary" outlined /> <Button label="Secondary" severity="secondary" variant="outlined" />
<Button label="Success" severity="success" outlined /> <Button label="Success" severity="success" variant="outlined" />
<Button label="Info" severity="info" outlined /> <Button label="Info" severity="info" variant="outlined" />
<Button label="Warn" severity="warn" outlined /> <Button label="Warn" severity="warn" variant="outlined" />
<Button label="Help" severity="help" outlined /> <Button label="Help" severity="help" variant="outlined" />
<Button label="Danger" severity="danger" outlined /> <Button label="Danger" severity="danger" variant="outlined" />
<Button label="Contrast" severity="contrast" outlined /> <Button label="Contrast" severity="contrast" variant="outlined" />
</div> </div>
</template> </template>

66
apps/showcase/doc/button/RaisedTextDoc.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text buttons can be displayed as raised as well for elevation.</p> <p>Text buttons can be displayed elevated with the <i>raised</i> option.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center flex-wrap gap-4"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" text raised /> <Button label="Primary" variant="text" raised />
<Button label="Secondary" severity="secondary" text raised /> <Button label="Secondary" severity="secondary" variant="text" raised />
<Button label="Success" severity="success" text raised /> <Button label="Success" severity="success" variant="text" raised />
<Button label="Info" severity="info" text raised /> <Button label="Info" severity="info" variant="text" raised />
<Button label="Warn" severity="warn" text raised /> <Button label="Warn" severity="warn" variant="text" raised />
<Button label="Help" severity="help" text raised /> <Button label="Help" severity="help" variant="text" raised />
<Button label="Danger" severity="danger" text raised /> <Button label="Danger" severity="danger" variant="text" raised />
<Button label="Contrast" severity="contrast" text raised /> <Button label="Contrast" severity="contrast" variant="text" raised />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -21,26 +21,26 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Button label="Primary" text raised /> <Button label="Primary" variant="text" raised />
<Button label="Secondary" severity="secondary" text raised /> <Button label="Secondary" severity="secondary" variant="text" raised />
<Button label="Success" severity="success" text raised /> <Button label="Success" severity="success" variant="text" raised />
<Button label="Info" severity="info" text raised /> <Button label="Info" severity="info" variant="text" raised />
<Button label="Warn" severity="warn" text raised /> <Button label="Warn" severity="warn" variant="text" raised />
<Button label="Help" severity="help" text raised /> <Button label="Help" severity="help" variant="text" raised />
<Button label="Danger" severity="danger" text raised /> <Button label="Danger" severity="danger" variant="text" raised />
<Button label="Contrast" severity="contrast" text raised /> <Button label="Contrast" severity="contrast" variant="text" raised />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center flex-wrap gap-4"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" text raised /> <Button label="Primary" variant="text" raised />
<Button label="Secondary" severity="secondary" text raised /> <Button label="Secondary" severity="secondary" variant="text" raised />
<Button label="Success" severity="success" text raised /> <Button label="Success" severity="success" variant="text" raised />
<Button label="Info" severity="info" text raised /> <Button label="Info" severity="info" variant="text" raised />
<Button label="Warn" severity="warn" text raised /> <Button label="Warn" severity="warn" variant="text" raised />
<Button label="Help" severity="help" text raised /> <Button label="Help" severity="help" variant="text" raised />
<Button label="Danger" severity="danger" text raised /> <Button label="Danger" severity="danger" variant="text" raised />
<Button label="Contrast" severity="contrast" text raised /> <Button label="Contrast" severity="contrast" variant="text" raised />
</div> </div>
</template> </template>
@ -50,14 +50,14 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center flex-wrap gap-4"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" text raised /> <Button label="Primary" variant="text" raised />
<Button label="Secondary" severity="secondary" text raised /> <Button label="Secondary" severity="secondary" variant="text" raised />
<Button label="Success" severity="success" text raised /> <Button label="Success" severity="success" variant="text" raised />
<Button label="Info" severity="info" text raised /> <Button label="Info" severity="info" variant="text" raised />
<Button label="Warn" severity="warn" text raised /> <Button label="Warn" severity="warn" variant="text" raised />
<Button label="Help" severity="help" text raised /> <Button label="Help" severity="help" variant="text" raised />
<Button label="Danger" severity="danger" text raised /> <Button label="Danger" severity="danger" variant="text" raised />
<Button label="Contrast" severity="contrast" text raised /> <Button label="Contrast" severity="contrast" variant="text" raised />
</div> </div>
</template> </template>

8
apps/showcase/doc/button/TemplateDoc.vue
View File

@ -3,7 +3,7 @@
<p>Custom content inside a button is defined as children.</p> <p>Custom content inside a button is defined as children.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button outlined class="!border-2"> <Button variant="outlined" class="!border-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z" d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@ -25,7 +25,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Button outlined class="!border-2"> <Button variant="outlined" class="!border-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="var(--p-primary-color)" /> <path d="..." fill="var(--p-primary-color)" />
<path d="..." fill="var(--p-text-color)" /> <path d="..." fill="var(--p-text-color)" />
@ -35,7 +35,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button outlined class="!border-2"> <Button variant="outlined" class="!border-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z" d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@ -56,7 +56,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button outlined class="!border-2"> <Button variant="outlined" class="!border-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z" d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"

64
apps/showcase/doc/button/TextDoc.vue
View File

@ -3,14 +3,14 @@
<p>Text buttons are displayed as textual elements.</p> <p>Text buttons are displayed as textual elements.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center flex-wrap gap-4"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" text /> <Button label="Primary" variant="text" />
<Button label="Secondary" severity="secondary" text /> <Button label="Secondary" severity="secondary" variant="text" />
<Button label="Success" severity="success" text /> <Button label="Success" severity="success" variant="text" />
<Button label="Info" severity="info" text /> <Button label="Info" severity="info" variant="text" />
<Button label="Warn" severity="warn" text /> <Button label="Warn" severity="warn" variant="text" />
<Button label="Help" severity="help" text /> <Button label="Help" severity="help" variant="text" />
<Button label="Danger" severity="danger" text /> <Button label="Danger" severity="danger" variant="text" />
<Button label="Contrast" severity="contrast" text /> <Button label="Contrast" severity="contrast" variant="text" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -21,26 +21,26 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Button label="Primary" text /> <Button label="Primary" variant="text" />
<Button label="Secondary" severity="secondary" text /> <Button label="Secondary" severity="secondary" variant="text" />
<Button label="Success" severity="success" text /> <Button label="Success" severity="success" variant="text" />
<Button label="Info" severity="info" text /> <Button label="Info" severity="info" variant="text" />
<Button label="Warn" severity="warn" text /> <Button label="Warn" severity="warn" variant="text" />
<Button label="Help" severity="help" text /> <Button label="Help" severity="help" variant="text" />
<Button label="Danger" severity="danger" text /> <Button label="Danger" severity="danger" variant="text" />
<Button label="Contrast" severity="contrast" text /> <Button label="Contrast" severity="contrast" variant="text" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center flex-wrap gap-4"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" text /> <Button label="Primary" variant="text" />
<Button label="Secondary" severity="secondary" text /> <Button label="Secondary" severity="secondary" variant="text" />
<Button label="Success" severity="success" text /> <Button label="Success" severity="success" variant="text" />
<Button label="Info" severity="info" text /> <Button label="Info" severity="info" variant="text" />
<Button label="Warn" severity="warn" text /> <Button label="Warn" severity="warn" variant="text" />
<Button label="Help" severity="help" text /> <Button label="Help" severity="help" variant="text" />
<Button label="Danger" severity="danger" text /> <Button label="Danger" severity="danger" variant="text" />
<Button label="Contrast" severity="contrast" text /> <Button label="Contrast" severity="contrast" variant="text" />
</div> </div>
</template> </template>
@ -50,14 +50,14 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center flex-wrap gap-4"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" text /> <Button label="Primary" variant="text" />
<Button label="Secondary" severity="secondary" text /> <Button label="Secondary" severity="secondary" variant="text" />
<Button label="Success" severity="success" text /> <Button label="Success" severity="success" variant="text" />
<Button label="Info" severity="info" text /> <Button label="Info" severity="info" variant="text" />
<Button label="Warn" severity="warn" text /> <Button label="Warn" severity="warn" variant="text" />
<Button label="Help" severity="help" text /> <Button label="Help" severity="help" variant="text" />
<Button label="Danger" severity="danger" text /> <Button label="Danger" severity="danger" variant="text" />
<Button label="Contrast" severity="contrast" text /> <Button label="Contrast" severity="contrast" variant="text" />
</div> </div>
</template> </template>

4
packages/primevue/src/button/BaseButton.vue
View File

@ -78,6 +78,10 @@ export default {
type: String, type: String,
default: null default: null
}, },
variant: {
type: String,
default: null
},
plain: { plain: {
type: Boolean, type: Boolean,
default: false default: false

5
packages/primevue/src/button/Button.d.ts vendored
View File

@ -172,6 +172,11 @@ export interface ButtonProps extends ButtonHTMLAttributes {
* Defines the size of the button. * Defines the size of the button.
*/ */
size?: 'small' | 'large' | undefined; size?: 'small' | 'large' | undefined;
/**
* Specifies the variant of the component.
* @defaultValue undefined
*/
variant?: 'outlined' | 'text' | undefined;
/** /**
* Add a plain textual class to the button without a background initially. * Add a plain textual class to the button without a background initially.
* @defaultValue false * @defaultValue false

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

@ -625,12 +625,12 @@ const classes = {
'p-button-icon-only': instance.hasIcon && !props.label && !props.badge, 'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label, 'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
'p-button-loading': props.loading, 'p-button-loading': props.loading,
'p-button-link': props.link, 'p-button-link': props.link || props.variant === 'link',
[`p-button-${props.severity}`]: props.severity, [`p-button-${props.severity}`]: props.severity,
'p-button-raised': props.raised, 'p-button-raised': props.raised,
'p-button-rounded': props.rounded, 'p-button-rounded': props.rounded,
'p-button-text': props.text, 'p-button-text': props.text || props.variant === 'text',
'p-button-outlined': props.outlined, 'p-button-outlined': props.outlined || props.variant === 'outlined',
'p-button-sm': props.size === 'small', 'p-button-sm': props.size === 'small',
'p-button-lg': props.size === 'large', 'p-button-lg': props.size === 'large',
'p-button-plain': props.plain, 'p-button-plain': props.plain,

4
packages/primevue/src/message/Message.d.ts vendored
View File

@ -161,8 +161,8 @@ export interface MessageProps {
*/ */
size?: 'small' | 'large' | undefined; size?: 'small' | 'large' | undefined;
/** /**
* Specifies the input variant of the component. * Specifies the variant of the component.
* @defaultValue outlined * @defaultValue undefined
*/ */
variant?: 'outlined' | 'simple' | undefined; variant?: 'outlined' | 'simple' | undefined;
} }