ionic-team · liamdebeasi · Jul 19, 2023 · Jul 7, 2023 · Jul 19, 2023 · Jul 19, 2023
@@ -78,6 +78,24 @@ import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.
 
 <CSSProps />
 
+## Accessibility
+
+Buttons are built to be accessible, but may need some adjustments depending on their content. The button component renders a native [button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) which allows it to take advantage of the functionality that a native button provides.
+
+### Overflowing Text Content
+
+There are many cases where a button's text content may overflow the container. It is recommended to wrap the text inside of the button when this happens so that all of the text can still be read. The button component will automatically adjust its height to accommodate the extra lines of text.
+
+The button text does not automatically wrap to the next line when the text is too long to fit. In order to make the text wrap, the `ion-text-wrap` class can be added, which will set the `white-space` property to `"normal"`. This will become the default in a future major release.
+
+:::info
+The `max-width` style is set on the button below for demo purposes only. Text wrapping will work with a dynamic button width.
+:::
+
+import TextWrapping from '@site/static/usage/v7/button/text-wrapping/index.md';
+
+<TextWrapping />
+
 ## Properties
 <Props />
 

@@ -12,6 +12,20 @@ title: Glossary
 
 <div id="what-is">
 
+<section id="a11y">
+  <a href="#a11y">
+    <h3>Accessibility</h3>
+  </a>
+  <p>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" target="_blank">
+      Accessibility
+    </a>{' '}
+    (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited
+    abilities. This includes people with disabilities, those using mobile devices, and those with slow network
+    connections. Content should be developed to be as accessible as technology allows.
+  </p>
+</section>
+
 <section id="android-sdk">
   <a href="#android-sdk">
     <h3>Android SDK</h3>

@@ -0,0 +1,7 @@
+```html
+<ion-button>Default</ion-button>
+<ion-button class="ion-text-wrap" style="max-width: 400px"
+  >This is the button that never ends it just goes on and on and on and on and on and on and on and on my
+  friends</ion-button
+>
+```
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Button</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-button>Default</ion-button>
+          <ion-button class="ion-text-wrap" style="max-width: 400px"
+            >This is the button that never ends it just goes on and on and on and on and on and on and on and on my
+            friends</ion-button
+          >
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/text-wrapping/demo.html" />
@@ -0,0 +1,7 @@
+```html
+<ion-button>Default</ion-button>
+<ion-button class="ion-text-wrap" style="max-width: 400px"
+  >This is the button that never ends it just goes on and on and on and on and on and on and on and on my
+  friends</ion-button
+>
+```
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonButton>Default</IonButton>
+      <IonButton className="ion-text-wrap" style={{ maxWidth: '400px' }}>
+        This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-button>Default</ion-button>
+  <ion-button class="ion-text-wrap" style="max-width: 400px"
+    >This is the button that never ends it just goes on and on and on and on and on and on and on and on my
+    friends</ion-button
+  >
+</template>
+
+<script lang="ts">
+  import { IonButton } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+  });
+</script>
+```