# ion-buttons

URL: https://ionicframework.com/docs/api/buttons

**Encapsulation**: [scoped](/docs/reference/glossary.md#scoped)

The Buttons component is a container element. It should be used inside of a [toolbar](/docs/api/toolbar.md) and can contain several types of buttons, including standard [buttons](/docs/api/button.md), [menu buttons](/docs/api/menu-button.md), and [back buttons](/docs/api/back-button.md).

## Basic Usage

**JavaScript**

```html
<ion-toolbar>
  <ion-buttons slot="start">
    <ion-button>Button</ion-button>
  </ion-buttons>
  <ion-title>Default Buttons</ion-title>
</ion-toolbar>
```

**Angular**

`src/app/example.component.html`

```html
<ion-toolbar>
  <ion-buttons slot="start">
    <ion-button>Button</ion-button>
  </ion-buttons>
  <ion-title>Default Buttons</ion-title>
</ion-toolbar>
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonButton, IonButtons, IonTitle, IonToolbar],
})
export class ExampleComponent {}
```

**React**

```tsx
import React from 'react';
import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/react';

function Example() {
  return (
    <IonToolbar>
      <IonButtons slot="start">
        <IonButton>Button</IonButton>
      </IonButtons>
      <IonTitle>Default Buttons</IonTitle>
    </IonToolbar>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button>Button</ion-button>
    </ion-buttons>
    <ion-title>Default Buttons</ion-title>
  </ion-toolbar>
</template>

<script setup lang="ts">
  import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/vue';
</script>
```

## Buttons Placement

Buttons can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.

| Slot | Description |
| --- | --- |
| `start` | Positions to the `left` of the content in LTR, and to the `right` in RTL. |
| `end` | Positions to the `right` of the content in LTR, and to the `left` in RTL. |
| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. |
| `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. |

**JavaScript**

```html
<ion-toolbar>
  <ion-buttons slot="start">
    <ion-button>Start</ion-button>
  </ion-buttons>
  <ion-title>Buttons</ion-title>
  <ion-buttons slot="end">
    <ion-button>End</ion-button>
  </ion-buttons>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>Secondary</ion-button>
  </ion-buttons>
  <ion-title>Buttons</ion-title>
  <ion-buttons slot="primary">
    <ion-button>Primary</ion-button>
  </ion-buttons>
</ion-toolbar>
```

**Angular**

`src/app/example.component.html`

```html
<ion-toolbar>
  <ion-buttons slot="start">
    <ion-button>Start</ion-button>
  </ion-buttons>
  <ion-title>Buttons</ion-title>
  <ion-buttons slot="end">
    <ion-button>End</ion-button>
  </ion-buttons>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>Secondary</ion-button>
  </ion-buttons>
  <ion-title>Buttons</ion-title>
  <ion-buttons slot="primary">
    <ion-button>Primary</ion-button>
  </ion-buttons>
</ion-toolbar>
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonButton, IonButtons, IonTitle, IonToolbar],
})
export class ExampleComponent {}
```

**React**

```tsx
import React from 'react';
import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/react';

function Example() {
  return (
    <>
      <IonToolbar>
        <IonButtons slot="start">
          <IonButton>Start</IonButton>
        </IonButtons>
        <IonTitle>Buttons</IonTitle>
        <IonButtons slot="end">
          <IonButton>End</IonButton>
        </IonButtons>
      </IonToolbar>

      <IonToolbar>
        <IonButtons slot="secondary">
          <IonButton>Secondary</IonButton>
        </IonButtons>
        <IonTitle>Buttons</IonTitle>
        <IonButtons slot="primary">
          <IonButton>Primary</IonButton>
        </IonButtons>
      </IonToolbar>
    </>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button>Start</ion-button>
    </ion-buttons>
    <ion-title>Buttons</ion-title>
    <ion-buttons slot="end">
      <ion-button>End</ion-button>
    </ion-buttons>
  </ion-toolbar>

  <ion-toolbar>
    <ion-buttons slot="secondary">
      <ion-button>Secondary</ion-button>
    </ion-buttons>
    <ion-title>Buttons</ion-title>
    <ion-buttons slot="primary">
      <ion-button>Primary</ion-button>
    </ion-buttons>
  </ion-toolbar>
</template>

<script setup lang="ts">
  import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/vue';
</script>
```

## Types of Buttons

A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](/docs/api/button.md#fill) property on the button. The properties included on [back button](/docs/api/back-button.md) and [menu button](/docs/api/menu-button.md) in this example are for display purposes; refer to their respective documentation for proper usage.

**JavaScript**

`index.html`

```html
<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button size="large"> Favorite </ion-button>
  </ion-buttons>
  <ion-title>Default Buttons</ion-title>
  <ion-buttons slot="primary">
    <ion-button> Delete </ion-button>
  </ion-buttons>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
    </ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button>
      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Icon Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button fill="solid">
      <ion-icon slot="start" name="person-circle"></ion-icon>
      Contact
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button fill="solid">
      Help
      <ion-icon slot="end" name="help-circle"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Solid Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button fill="outline">
      <ion-icon slot="start" name="star"></ion-icon>
      Star
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button fill="outline">
      Edit
      <ion-icon slot="end" name="create"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Outline Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button default-href="#"></ion-back-button>
  </ion-buttons>
  <ion-title>Back Button</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-menu-button auto-hide="false"></ion-menu-button>
  </ion-buttons>
  <ion-title>Menu Button</ion-title>
</ion-toolbar>
```

`index.ts`

```ts
import { defineCustomElements } from '@ionic/core/loader';

import { addIcons } from 'ionicons';
import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';

/* Core CSS required for Ionic components to work properly */
import '@ionic/core/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/core/css/normalize.css';
import '@ionic/core/css/structure.css';
import '@ionic/core/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/core/css/padding.css';
import '@ionic/core/css/float-elements.css';
import '@ionic/core/css/text-alignment.css';
import '@ionic/core/css/text-transformation.css';
import '@ionic/core/css/flex-utils.css';
import '@ionic/core/css/display.css';

/**
 * Ionic Dark Palette
 * -----------------------------------------------------
 * For more information, please see:
 * https://ionicframework.com/docs/theming/dark-mode
 */

// import '@ionic/core/css/palettes/dark.always.css';
// import '@ionic/core/css/palettes/dark.class.css';
import '@ionic/core/css/palettes/dark.system.css';

/* Theme variables */
import './theme/variables.css';

/**
 * On Ionicons 7.2+ these icons
 * get mapped to a kebab-case key.
 * Alternatively, developers can do:
 * addIcons({ 'create': create, 'ellipsis-horizontal': ellipsisHorizontal, 'ellipsis-vertical': ellipsisVertical,
 * 'help-circle': helpCircle, 'person-circle': personCircle, 'search': search, 'star': star });
 */
addIcons({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star });

defineCustomElements();
```

**Angular**

`src/app/example.component.html`

```html
<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button size="large"> Favorite </ion-button>
  </ion-buttons>
  <ion-title>Default Buttons</ion-title>
  <ion-buttons slot="primary">
    <ion-button> Delete </ion-button>
  </ion-buttons>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
    </ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button>
      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Icon Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button fill="solid">
      <ion-icon slot="start" name="person-circle"></ion-icon>
      Contact
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button fill="solid">
      Help
      <ion-icon slot="end" name="help-circle"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Solid Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button fill="outline">
      <ion-icon slot="start" name="star"></ion-icon>
      Star
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button fill="outline">
      Edit
      <ion-icon slot="end" name="create"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Outline Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button default-href="#"></ion-back-button>
  </ion-buttons>
  <ion-title>Back Button</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-menu-button auto-hide="false"></ion-menu-button>
  </ion-buttons>
  <ion-title>Menu Button</ion-title>
</ion-toolbar>
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/angular';

import { addIcons } from 'ionicons';
import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar],
})
export class ExampleComponent {
  constructor() {
    /**
     * Any icons you want to use in your application
     * can be registered in app.component.ts and then
     * referenced by name anywhere in your application.
     */
    addIcons({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star });
  }
}
```

**React**

```tsx
import React from 'react';
import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react';
import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';

function Example() {
  return (
    <>
      <IonToolbar>
        <IonButtons slot="secondary">
          <IonButton size="large">Favorite</IonButton>
        </IonButtons>
        <IonTitle>Default Buttons</IonTitle>
        <IonButtons slot="primary">
          <IonButton>Delete</IonButton>
        </IonButtons>
      </IonToolbar>

      <IonToolbar>
        <IonButtons slot="secondary">
          <IonButton>
            <IonIcon slot="icon-only" icon={personCircle}></IonIcon>
          </IonButton>
          <IonButton>
            <IonIcon slot="icon-only" icon={search}></IonIcon>
          </IonButton>
        </IonButtons>
        <IonButtons slot="primary">
          <IonButton>
            <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
          </IonButton>
        </IonButtons>
        <IonTitle>Icon Buttons</IonTitle>
      </IonToolbar>

      <IonToolbar>
        <IonButtons slot="secondary">
          <IonButton fill="solid">
            <IonIcon slot="start" icon={personCircle}></IonIcon>
            Contact
          </IonButton>
        </IonButtons>
        <IonButtons slot="primary">
          <IonButton fill="solid">
            Help
            <IonIcon slot="end" icon={helpCircle}></IonIcon>
          </IonButton>
        </IonButtons>
        <IonTitle>Solid Buttons</IonTitle>
      </IonToolbar>

      <IonToolbar>
        <IonButtons slot="secondary">
          <IonButton fill="outline">
            <IonIcon slot="start" icon={star}></IonIcon>
            Star
          </IonButton>
        </IonButtons>
        <IonButtons slot="primary">
          <IonButton fill="outline">
            Edit
            <IonIcon slot="end" icon={create}></IonIcon>
          </IonButton>
        </IonButtons>
        <IonTitle>Outline Buttons</IonTitle>
      </IonToolbar>

      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton defaultHref="#"></IonBackButton>
        </IonButtons>
        <IonTitle>Back Button</IonTitle>
      </IonToolbar>

      <IonToolbar>
        <IonButtons slot="start">
          <IonMenuButton autoHide={false}></IonMenuButton>
        </IonButtons>
        <IonTitle>Menu Button</IonTitle>
      </IonToolbar>
    </>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-toolbar>
    <ion-buttons slot="secondary">
      <ion-button size="large"> Favorite </ion-button>
    </ion-buttons>
    <ion-title>Default Buttons</ion-title>
    <ion-buttons slot="primary">
      <ion-button> Delete </ion-button>
    </ion-buttons>
  </ion-toolbar>

  <ion-toolbar>
    <ion-buttons slot="secondary">
      <ion-button>
        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon slot="icon-only" :icon="search"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="primary">
      <ion-button>
        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Icon Buttons</ion-title>
  </ion-toolbar>

  <ion-toolbar>
    <ion-buttons slot="secondary">
      <ion-button fill="solid">
        <ion-icon slot="start" :icon="personCircle"></ion-icon>
        Contact
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="primary">
      <ion-button fill="solid">
        Help
        <ion-icon slot="end" :icon="helpCircle"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Solid Buttons</ion-title>
  </ion-toolbar>

  <ion-toolbar>
    <ion-buttons slot="secondary">
      <ion-button fill="outline">
        <ion-icon slot="start" :icon="star"></ion-icon>
        Star
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="primary">
      <ion-button fill="outline">
        Edit
        <ion-icon slot="end" :icon="create"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Outline Buttons</ion-title>
  </ion-toolbar>

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button default-href="#"></ion-back-button>
    </ion-buttons>
    <ion-title>Back Button</ion-title>
  </ion-toolbar>

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button :auto-hide="false"></ion-menu-button>
    </ion-buttons>
    <ion-title>Menu Button</ion-title>
  </ion-toolbar>
</template>

<script setup lang="ts">
  import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
  import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
</script>
```

## Collapsible Buttons

The `collapse` property can be set on the buttons to collapse them when the header collapses. This is typically used with [collapsible large titles](/docs/api/title.md#collapsible-large-titles).

**Info**

This feature is only available for iOS.

**JavaScript**

```html
<ion-header translucent="true">
  <ion-toolbar>
    <ion-title>Title</ion-title>
    <ion-buttons collapse="true" slot="end">
      <ion-button>Button</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content fullscreen="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Title</ion-title>
      <ion-buttons collapse="true" slot="end">
        <ion-button>Button</ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <div class="ion-padding">Scroll the list to see the title & buttons collapse.</div>

  <ion-list>
    <ion-item>Item 1</ion-item>
    <ion-item>Item 2</ion-item>
    <ion-item>Item 3</ion-item>
    <ion-item>Item 4</ion-item>
    <ion-item>Item 5</ion-item>
    <ion-item>Item 6</ion-item>
    <ion-item>Item 7</ion-item>
    <ion-item>Item 8</ion-item>
    <ion-item>Item 9</ion-item>
    <ion-item>Item 10</ion-item>
    <ion-item>Item 11</ion-item>
    <ion-item>Item 12</ion-item>
    <ion-item>Item 13</ion-item>
    <ion-item>Item 14</ion-item>
    <ion-item>Item 15</ion-item>
    <ion-item>Item 16</ion-item>
    <ion-item>Item 17</ion-item>
    <ion-item>Item 18</ion-item>
    <ion-item>Item 19</ion-item>
    <ion-item>Item 20</ion-item>
  </ion-list>
</ion-content>
```

**Angular**

`src/app/example.component.html`

```html
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>Title</ion-title>
    <ion-buttons [collapse]="true" slot="end">
      <ion-button>Button</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Title</ion-title>
      <ion-buttons [collapse]="true" slot="end">
        <ion-button>Button</ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <div class="ion-padding">Scroll the list to see the title & buttons collapse.</div>

  <ion-list>
    <ion-item>Item 1</ion-item>
    <ion-item>Item 2</ion-item>
    <ion-item>Item 3</ion-item>
    <ion-item>Item 4</ion-item>
    <ion-item>Item 5</ion-item>
    <ion-item>Item 6</ion-item>
    <ion-item>Item 7</ion-item>
    <ion-item>Item 8</ion-item>
    <ion-item>Item 9</ion-item>
    <ion-item>Item 10</ion-item>
    <ion-item>Item 11</ion-item>
    <ion-item>Item 12</ion-item>
    <ion-item>Item 13</ion-item>
    <ion-item>Item 14</ion-item>
    <ion-item>Item 15</ion-item>
    <ion-item>Item 16</ion-item>
    <ion-item>Item 17</ion-item>
    <ion-item>Item 18</ion-item>
    <ion-item>Item 19</ion-item>
    <ion-item>Item 20</ion-item>
  </ion-list>
</ion-content>
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonButton, IonButtons, IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonButton, IonButtons, IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar],
})
export class ExampleComponent {}
```

**React**

```tsx
import React from 'react';
import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton } from '@ionic/react';

function Example() {
  return (
    <>
      <IonHeader translucent={true}>
        <IonToolbar>
          <IonTitle>Title</IonTitle>
          <IonButtons collapse={true} slot="end">
            <IonButton>Button</IonButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen={true}>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Title</IonTitle>
            <IonButtons collapse={true} slot="end">
              <IonButton>Button</IonButton>
            </IonButtons>
          </IonToolbar>
        </IonHeader>

        <div className="ion-padding">Scroll the list to see the title & buttons collapse.</div>

        <IonList>
          <IonItem>Item 1</IonItem>
          <IonItem>Item 2</IonItem>
          <IonItem>Item 3</IonItem>
          <IonItem>Item 4</IonItem>
          <IonItem>Item 5</IonItem>
          <IonItem>Item 6</IonItem>
          <IonItem>Item 7</IonItem>
          <IonItem>Item 8</IonItem>
          <IonItem>Item 9</IonItem>
          <IonItem>Item 10</IonItem>
          <IonItem>Item 11</IonItem>
          <IonItem>Item 12</IonItem>
          <IonItem>Item 13</IonItem>
          <IonItem>Item 14</IonItem>
          <IonItem>Item 15</IonItem>
          <IonItem>Item 16</IonItem>
          <IonItem>Item 17</IonItem>
          <IonItem>Item 18</IonItem>
          <IonItem>Item 19</IonItem>
          <IonItem>Item 20</IonItem>
        </IonList>
      </IonContent>
    </>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-header :translucent="true">
    <ion-toolbar>
      <ion-title>Title</ion-title>
      <ion-buttons :collapse="true" slot="end">
        <ion-button>Button</ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <ion-content :fullscreen="true">
    <ion-header collapse="condense">
      <ion-toolbar>
        <ion-title size="large">Title</ion-title>
        <ion-buttons :collapse="true" slot="end">
          <ion-button>Button</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <div class="ion-padding">Scroll the list to see the title & buttons collapse.</div>

    <ion-list>
      <ion-item>Item 1</ion-item>
      <ion-item>Item 2</ion-item>
      <ion-item>Item 3</ion-item>
      <ion-item>Item 4</ion-item>
      <ion-item>Item 5</ion-item>
      <ion-item>Item 6</ion-item>
      <ion-item>Item 7</ion-item>
      <ion-item>Item 8</ion-item>
      <ion-item>Item 9</ion-item>
      <ion-item>Item 10</ion-item>
      <ion-item>Item 11</ion-item>
      <ion-item>Item 12</ion-item>
      <ion-item>Item 13</ion-item>
      <ion-item>Item 14</ion-item>
      <ion-item>Item 15</ion-item>
      <ion-item>Item 16</ion-item>
      <ion-item>Item 17</ion-item>
      <ion-item>Item 18</ion-item>
      <ion-item>Item 19</ion-item>
      <ion-item>Item 20</ion-item>
    </ion-list>
  </ion-content>
</template>

<script setup lang="ts">
  import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton } from '@ionic/vue';
</script>
```

## Properties

### collapse

**Description**: If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed. Only applies in `ios` mode with `collapse` set to `true` on `ion-header`. Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)

**Attribute**: `collapse`

**Type**: `boolean`

**Default**: `false`

## Events

No events available for this component.

## Methods

No public methods available for this component.

## CSS Shadow Parts

No CSS shadow parts available for this component.

## CSS Custom Properties

No CSS custom properties available for this component.

## Slots

| Name | Description |
| --- | --- |
|  | The default slot |