GitHub

Original file line numberDiff line numberDiff line change

@@ -44,7 +44,7 @@ async function copyPage() {

4444

</script>

4545
4646

<template>

47-

<UButtonGroup>

47+

<UFieldGroup>

4848

<UButton

4949

label="Copy page"

5050

:icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"

@@ -73,5 +73,5 @@ async function copyPage() {

7373

variant="outline"

7474

/>

7575

</UDropdownMenu>

76-

</UButtonGroup>

76+

</UFieldGroup>

7777

</template>

Original file line numberDiff line numberDiff line change

@@ -1,7 +1,7 @@

11

<template>

2-

<UButtonGroup>

2+

<UFieldGroup>

33

<UBadge color="neutral" variant="outline" size="lg" label="https://" />

44
55

<UInput color="neutral" variant="outline" placeholder="www.example.com" />

6-

</UButtonGroup>

6+

</UFieldGroup>

77

</template>

Original file line numberDiff line numberDiff line change

@@ -28,7 +28,7 @@ const items: DropdownMenuItem[] = [

2828

</script>

2929
3030

<template>

31-

<UButtonGroup>

31+

<UFieldGroup>

3232

<UButton color="neutral" variant="subtle" label="Settings" />

3333
3434

<UDropdownMenu :items="items">

@@ -38,5 +38,5 @@ const items: DropdownMenuItem[] = [

3838

icon="i-lucide-chevron-down"

3939

/>

4040

</UDropdownMenu>

41-

</UButtonGroup>

41+

</UFieldGroup>

4242

</template>

Original file line numberDiff line numberDiff line change

@@ -1,5 +1,5 @@

11

<template>

2-

<UButtonGroup>

2+

<UFieldGroup>

33

<UInput color="neutral" variant="outline" placeholder="Enter token" />

44
55

<UTooltip text="Copy to clipboard">

@@ -9,5 +9,5 @@

99

icon="i-lucide-clipboard"

1010

/>

1111

</UTooltip>

12-

</UButtonGroup>

12+

</UFieldGroup>

1313

</template>

Original file line numberDiff line numberDiff line change

@@ -5,7 +5,7 @@ const domain = ref(domains[0])

55

</script>

66
77

<template>

8-

<UButtonGroup>

8+

<UFieldGroup>

99

<UInput

1010

v-model="value"

1111

placeholder="nuxt"

@@ -22,5 +22,5 @@ const domain = ref(domains[0])

2222

</UInput>

2323
2424

<USelectMenu v-model="domain" :items="domains" />

25-

</UButtonGroup>

25+

</UFieldGroup>

2626

</template>

Original file line numberDiff line numberDiff line change

@@ -1,16 +1,16 @@

11

---

2-

title: ButtonGroup

2+

title: FieldGroup

33

description: Group multiple button-like elements together.

44

category: element

55

links:

66

- label: GitHub

77

icon: i-simple-icons-github

8-

to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/ButtonGroup.vue

8+

to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/FieldGroup.vue

99

---

1010
1111

## Usage

1212
13-

Wrap multiple [Button](/docs/components/button) within a ButtonGroup to group them together.

13+

Wrap multiple [Button](/components/button) within a FieldGroup to group them together.

1414
1515

::component-code

1616

---

@@ -67,7 +67,7 @@ slots:

6767
6868

### With input

6969
70-

You can use components like [Input](/docs/components/input), [InputMenu](/docs/components/input-menu), [Select](/docs/components/select) [SelectMenu](/docs/components/select-menu), etc. within a button group.

70+

You can use components like [Input](/components/input), [InputMenu](/components/input-menu), [Select](/components/select) [SelectMenu](/components/select-menu), etc. within a field group.

7171
7272

::component-code

7373

---

@@ -85,21 +85,21 @@ slots:

8585
8686

### With tooltip

8787
88-

You can use a [Tooltip](/docs/components/tooltip) within a button group.

88+

You can use a [Tooltip](/components/tooltip) within a field group.

8989
90-

:component-example{name="button-group-tooltip-example"}

90+

:component-example{name="field-group-tooltip-example"}

9191
9292

### With dropdown

9393
94-

You can use a [DropdownMenu](/docs/components/dropdown-menu) within a button group.

94+

You can use a [DropdownMenu](/components/dropdown-menu) within a field group.

9595
96-

:component-example{name="button-group-dropdown-example"}

96+

:component-example{name="field-group-dropdown-example"}

9797
9898

### With badge

9999
100-

You can use a [Badge](/docs/components/badge) within a button group.

100+

You can use a [Badge](/components/badge) within a field group.

101101
102-

:component-example{name="button-group-badge-example"}

102+

:component-example{name="field-group-badge-example"}

103103
104104

## API

105105
Original file line numberDiff line numberDiff line change

@@ -312,13 +312,13 @@ name: 'input-form-field-example'

312312

It also provides validation and error handling when used within a **Form** component.

313313

::

314314
315-

### Within a ButtonGroup

315+

### Within a FieldGroup

316316
317-

You can use the Input within a [ButtonGroup](/docs/components/button-group) component to group multiple elements together.

317+

You can use the Input within a [FieldGroup](/components/field-group) component to group multiple elements together.

318318
319319

::component-example

320320

---

321-

name: 'input-button-group-example'

321+

name: 'input-field-group-example'

322322

---

323323

::

324324
Original file line numberDiff line numberDiff line change

@@ -71,6 +71,7 @@ export default defineNuxtConfig({

7171

'/getting-started/**': { redirect: { to: '/docs/getting-started/**', statusCode: 301 }, prerender: false },

7272

'/components/**': { redirect: { to: '/docs/components/**', statusCode: 301 }, prerender: false },

7373

'/composables/**': { redirect: { to: '/docs/composables/**', statusCode: 301 }, prerender: false },

74+

'/components/button-group': { redirect: { to: '/docs/components/field-group', statusCode: 301 }, prerender: false },

7475

// v4 redirects - default root pages

7576

'/docs': { redirect: '/docs/getting-started', prerender: false },

7677

'/docs/components': { redirect: '/docs/components/app', prerender: false },

File renamed without changes.

File renamed without changes.

Read the original on github.com ↗