diff --git a/docs/api/button.md b/docs/api/button.md index cc1630a1d44..28d6737e9d7 100644 --- a/docs/api/button.md +++ b/docs/api/button.md @@ -1,13 +1,6 @@ --- title: "ion-button" -hide_table_of_contents: true -demoUrl: "/docs/demos/api/button/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/button/index.html" --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import TOCInline from '@theme/TOCInline'; - import Props from '@site/static/auto-generated/button/props.md'; import Events from '@site/static/auto-generated/button/events.md'; import Methods from '@site/static/auto-generated/button/methods.md'; @@ -15,384 +8,75 @@ import Parts from '@site/static/auto-generated/button/parts.md'; import CustomProps from '@site/static/auto-generated/button/custom-props.md'; import Slots from '@site/static/auto-generated/button/slots.md'; -import EncapsulationPill from '@components/page/api/EncapsulationPill'; - ion-button: Design and Style Buttons with Custom CSS Properties +import EncapsulationPill from '@components/page/api/EncapsulationPill'; -

Contents

- - - Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way. -## Expand +## Basic Usage -This attribute lets you specify how wide the button should be. By default, buttons are inline blocks, but setting this attribute will change the button to a full-width block element. +import Basic from '@site/static/usage/button/basic/index.md'; -| Value | Details | -|----------------|------------------------------------------------------------------------------| -| `block` | Full-width button with rounded corners. | -| `full` | Full-width button with square corners and no border on the left or right. | - -## Fill - -This attribute determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background. - -| Value | Details | -|----------------|------------------------------------------------------------------------------| -| `clear` | Button with a transparent background that resembles a flat button. | -| `outline` | Button with a transparent background and a visible border. | -| `solid` | Button with a filled background. Useful for buttons in a toolbar. | - -## Size + -This attribute specifies the size of the button. Setting this attribute will change the height and padding of a button. - -| Value | Details | -|----------------|------------------------------------------------------------------------------| -| `small` | Button with less height and padding. Default for buttons in an item. | -| `default` | Button with the default height and padding. Useful for buttons in an item. | -| `large` | Button with more height and padding. | - - - - -## Usage - - - - - - -```html - -Default +## Expand - -Anchor +This property lets you specify how wide the button should be. By default, buttons are inline blocks, but setting this property will change the button to a full-width block element. - -Primary -Secondary -Tertiary -Success -Warning -Danger -Light -Medium -Dark +import Expand from '@site/static/usage/button/expand/index.md'; - -Full Button -Block Button + - -Round Button +## Shape - -Outline + Full -Outline + Block -Outline + Round +This property lets you specify the shape of the button. By default, buttons are rectangular with a small border radius, but setting this to `"round"` will change the button to a rounded element. - - - - Left Icon - +import Shape from '@site/static/usage/button/shape/index.md'; - - Right Icon - - + - - - - -Large -Default -Small -``` +## Fill +This property determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background. - +import Fill from '@site/static/usage/button/fill/index.md'; + - +## Size +This property specifies the size of the button. Setting this property will change the height and padding of a button. -```html - -Default +import Size from '@site/static/usage/button/size/index.md'; - -Anchor + - -Primary -Secondary -Tertiary -Success -Warning -Danger -Light -Medium -Dark +## Icons - -Full Button -Block Button +import Icons from '@site/static/usage/button/icons/index.md'; - -Round Button + - -Outline + Full -Outline + Block -Outline + Round +## Theming - - - - Left Icon - +### Colors - - Right Icon - - +import Colors from '@site/static/usage/button/theming/colors/index.md'; - - - - - -Large -Default -Small -``` - - - - - - - -```tsx -import React from 'react'; + -import { IonButton, IonIcon, IonContent } from '@ionic/react'; -import { star } from 'ionicons/icons'; +### CSS Custom Properties -export const ButtonExample: React.FC = () => ( - - {/*-- Default --*/} - Default - - {/*-- Anchor --*/} - Anchor - - {/*-- Colors --*/} - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark - - {/*-- Expand --*/} - Full Button - Block Button - - {/*-- Round --*/} - Round Button - - {/*-- Fill --*/} - Outline + Full - Outline + Block - Outline + Round +import CSSProps from '@site/static/usage/button/theming/css-properties/index.md'; - {/*-- Icons --*/} - - - Left Icon - - - - Right Icon - - - - - - - - {/*-- Sizes --*/} - Large - Default - Small - -); - -``` - - - - - - - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'button-example', - styleUrl: 'button-example.css' -}) -export class ButtonExample { - render() { - return [ - // Default - Default, - - // Anchor - Anchor, - - // Colors - Primary, - Secondary, - Tertiary, - Success, - Warning, - Danger, - Light, - Medium, - Dark, - - // Expand - Full Button, - Block Button, - - // Round - Round Button, - - // Fill - Outline + Full, - Outline + Block, - Outline + Round, - - // Icons - - - Left Icon - , - - - Right Icon - - , - - - - , - - // Sizes - Large, - Default, - Small - ]; - } -} -``` - - - - - - -```html - - - -``` - - - - - + ## Properties @@ -410,4 +94,4 @@ export default defineComponent({ ## Slots - \ No newline at end of file + diff --git a/static/usage/button/basic/angular.md b/static/usage/button/basic/angular.md new file mode 100644 index 00000000000..44ba5831426 --- /dev/null +++ b/static/usage/button/basic/angular.md @@ -0,0 +1,4 @@ +```html +Default +Disabled +``` diff --git a/static/usage/button/basic/demo.html b/static/usage/button/basic/demo.html new file mode 100644 index 00000000000..1faedab0fa7 --- /dev/null +++ b/static/usage/button/basic/demo.html @@ -0,0 +1,26 @@ + + + + + + + Button + + + + + + + + + + +
+ Default + Disabled +
+ + + + + diff --git a/static/usage/button/basic/index.md b/static/usage/button/basic/index.md new file mode 100644 index 00000000000..50170cfd37b --- /dev/null +++ b/static/usage/button/basic/index.md @@ -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'; + + diff --git a/static/usage/button/basic/javascript.md b/static/usage/button/basic/javascript.md new file mode 100644 index 00000000000..8296ef7f42a --- /dev/null +++ b/static/usage/button/basic/javascript.md @@ -0,0 +1,4 @@ +```html +Default +Disabled +``` diff --git a/static/usage/button/basic/react.md b/static/usage/button/basic/react.md new file mode 100644 index 00000000000..8393e9cf2b7 --- /dev/null +++ b/static/usage/button/basic/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Disabled + + ); +} +export default Example; +``` diff --git a/static/usage/button/basic/vue.md b/static/usage/button/basic/vue.md new file mode 100644 index 00000000000..dbd787691fb --- /dev/null +++ b/static/usage/button/basic/vue.md @@ -0,0 +1,15 @@ +```html + + + +``` diff --git a/static/usage/button/expand/angular.md b/static/usage/button/expand/angular.md new file mode 100644 index 00000000000..ca3f5093b84 --- /dev/null +++ b/static/usage/button/expand/angular.md @@ -0,0 +1,4 @@ +```html +Block +Full +``` diff --git a/static/usage/button/expand/demo.html b/static/usage/button/expand/demo.html new file mode 100644 index 00000000000..cfda23abb15 --- /dev/null +++ b/static/usage/button/expand/demo.html @@ -0,0 +1,32 @@ + + + + + + + Button + + + + + + + + + + + +
+ Block + Full +
+ + + + + diff --git a/static/usage/button/expand/index.md b/static/usage/button/expand/index.md new file mode 100644 index 00000000000..e41ccccfa24 --- /dev/null +++ b/static/usage/button/expand/index.md @@ -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'; + + diff --git a/static/usage/button/expand/javascript.md b/static/usage/button/expand/javascript.md new file mode 100644 index 00000000000..ca3f5093b84 --- /dev/null +++ b/static/usage/button/expand/javascript.md @@ -0,0 +1,4 @@ +```html +Block +Full +``` diff --git a/static/usage/button/expand/react.md b/static/usage/button/expand/react.md new file mode 100644 index 00000000000..424d8e1494b --- /dev/null +++ b/static/usage/button/expand/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Block + Full + + ); +} +export default Example; +``` diff --git a/static/usage/button/expand/vue.md b/static/usage/button/expand/vue.md new file mode 100644 index 00000000000..f67d93ecdef --- /dev/null +++ b/static/usage/button/expand/vue.md @@ -0,0 +1,15 @@ +```html + + + +``` diff --git a/static/usage/button/fill/angular.md b/static/usage/button/fill/angular.md new file mode 100644 index 00000000000..390ae848201 --- /dev/null +++ b/static/usage/button/fill/angular.md @@ -0,0 +1,6 @@ +```html +Default +Clear +Outline +Solid +``` diff --git a/static/usage/button/fill/demo.html b/static/usage/button/fill/demo.html new file mode 100644 index 00000000000..031eece07a5 --- /dev/null +++ b/static/usage/button/fill/demo.html @@ -0,0 +1,28 @@ + + + + + + + Button + + + + + + + + + + +
+ Default + Clear + Outline + Solid +
+ + + + + diff --git a/static/usage/button/fill/index.md b/static/usage/button/fill/index.md new file mode 100644 index 00000000000..b7870f10852 --- /dev/null +++ b/static/usage/button/fill/index.md @@ -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'; + + diff --git a/static/usage/button/fill/javascript.md b/static/usage/button/fill/javascript.md new file mode 100644 index 00000000000..390ae848201 --- /dev/null +++ b/static/usage/button/fill/javascript.md @@ -0,0 +1,6 @@ +```html +Default +Clear +Outline +Solid +``` diff --git a/static/usage/button/fill/react.md b/static/usage/button/fill/react.md new file mode 100644 index 00000000000..5a32a7d992d --- /dev/null +++ b/static/usage/button/fill/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Clear + Outline + Solid + + ); +} +export default Example; +``` diff --git a/static/usage/button/fill/vue.md b/static/usage/button/fill/vue.md new file mode 100644 index 00000000000..4b965ed3582 --- /dev/null +++ b/static/usage/button/fill/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/button/icons/angular.md b/static/usage/button/icons/angular.md new file mode 100644 index 00000000000..89d74ad2e17 --- /dev/null +++ b/static/usage/button/icons/angular.md @@ -0,0 +1,15 @@ +```html + + + Left Icon + + + + Right Icon + + + + + + +``` diff --git a/static/usage/button/icons/demo.html b/static/usage/button/icons/demo.html new file mode 100644 index 00000000000..7d7bb499cf5 --- /dev/null +++ b/static/usage/button/icons/demo.html @@ -0,0 +1,37 @@ + + + + + + + Button + + + + + + + + + + +
+ + + Left Icon + + + + Right Icon + + + + + + +
+ + + + + diff --git a/static/usage/button/icons/index.md b/static/usage/button/icons/index.md new file mode 100644 index 00000000000..718e4683b42 --- /dev/null +++ b/static/usage/button/icons/index.md @@ -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'; + + diff --git a/static/usage/button/icons/javascript.md b/static/usage/button/icons/javascript.md new file mode 100644 index 00000000000..89d74ad2e17 --- /dev/null +++ b/static/usage/button/icons/javascript.md @@ -0,0 +1,15 @@ +```html + + + Left Icon + + + + Right Icon + + + + + + +``` diff --git a/static/usage/button/icons/react.md b/static/usage/button/icons/react.md new file mode 100644 index 00000000000..09df368e950 --- /dev/null +++ b/static/usage/button/icons/react.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon } from '@ionic/react'; +import { star } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + Left Icon + + + + Right Icon + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/button/icons/vue.md b/static/usage/button/icons/vue.md new file mode 100644 index 00000000000..356fc5617dc --- /dev/null +++ b/static/usage/button/icons/vue.md @@ -0,0 +1,30 @@ +```html + + + +``` diff --git a/static/usage/button/shape/angular.md b/static/usage/button/shape/angular.md new file mode 100644 index 00000000000..97ed756261a --- /dev/null +++ b/static/usage/button/shape/angular.md @@ -0,0 +1,4 @@ +```html +Default +Round +``` diff --git a/static/usage/button/shape/demo.html b/static/usage/button/shape/demo.html new file mode 100644 index 00000000000..07bf8815bc6 --- /dev/null +++ b/static/usage/button/shape/demo.html @@ -0,0 +1,26 @@ + + + + + + + Button + + + + + + + + + + +
+ Default + Round +
+ + + + + diff --git a/static/usage/button/shape/index.md b/static/usage/button/shape/index.md new file mode 100644 index 00000000000..eab7aba8868 --- /dev/null +++ b/static/usage/button/shape/index.md @@ -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'; + + diff --git a/static/usage/button/shape/javascript.md b/static/usage/button/shape/javascript.md new file mode 100644 index 00000000000..97ed756261a --- /dev/null +++ b/static/usage/button/shape/javascript.md @@ -0,0 +1,4 @@ +```html +Default +Round +``` diff --git a/static/usage/button/shape/react.md b/static/usage/button/shape/react.md new file mode 100644 index 00000000000..df52c3f8985 --- /dev/null +++ b/static/usage/button/shape/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Round + + ); +} +export default Example; +``` diff --git a/static/usage/button/shape/vue.md b/static/usage/button/shape/vue.md new file mode 100644 index 00000000000..6db047c9532 --- /dev/null +++ b/static/usage/button/shape/vue.md @@ -0,0 +1,15 @@ +```html + + + +``` diff --git a/static/usage/button/size/angular.md b/static/usage/button/size/angular.md new file mode 100644 index 00000000000..a24809c2d61 --- /dev/null +++ b/static/usage/button/size/angular.md @@ -0,0 +1,5 @@ +```html +Small +Default +Large +``` diff --git a/static/usage/button/size/demo.html b/static/usage/button/size/demo.html new file mode 100644 index 00000000000..155cf9536b1 --- /dev/null +++ b/static/usage/button/size/demo.html @@ -0,0 +1,27 @@ + + + + + + + Button + + + + + + + + + + +
+ Small + Default + Large +
+ + + + + diff --git a/static/usage/button/size/index.md b/static/usage/button/size/index.md new file mode 100644 index 00000000000..9878f063f4b --- /dev/null +++ b/static/usage/button/size/index.md @@ -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'; + + diff --git a/static/usage/button/size/javascript.md b/static/usage/button/size/javascript.md new file mode 100644 index 00000000000..a24809c2d61 --- /dev/null +++ b/static/usage/button/size/javascript.md @@ -0,0 +1,5 @@ +```html +Small +Default +Large +``` diff --git a/static/usage/button/size/react.md b/static/usage/button/size/react.md new file mode 100644 index 00000000000..8deb283a9d4 --- /dev/null +++ b/static/usage/button/size/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Small + Default + Large + + ); +} +export default Example; +``` diff --git a/static/usage/button/size/vue.md b/static/usage/button/size/vue.md new file mode 100644 index 00000000000..02a27f22d1d --- /dev/null +++ b/static/usage/button/size/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/button/theming/colors/angular.md b/static/usage/button/theming/colors/angular.md new file mode 100644 index 00000000000..fed23e8442d --- /dev/null +++ b/static/usage/button/theming/colors/angular.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/button/theming/colors/demo.html b/static/usage/button/theming/colors/demo.html new file mode 100644 index 00000000000..afc878f37cc --- /dev/null +++ b/static/usage/button/theming/colors/demo.html @@ -0,0 +1,41 @@ + + + + + + + Button + + + + + + + + + + + +
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + + diff --git a/static/usage/button/theming/colors/index.md b/static/usage/button/theming/colors/index.md new file mode 100644 index 00000000000..48a76f4fcf1 --- /dev/null +++ b/static/usage/button/theming/colors/index.md @@ -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'; + + diff --git a/static/usage/button/theming/colors/javascript.md b/static/usage/button/theming/colors/javascript.md new file mode 100644 index 00000000000..fed23e8442d --- /dev/null +++ b/static/usage/button/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/button/theming/colors/react.md b/static/usage/button/theming/colors/react.md new file mode 100644 index 00000000000..066aaa06f59 --- /dev/null +++ b/static/usage/button/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark + + ); +} +export default Example; +``` diff --git a/static/usage/button/theming/colors/vue.md b/static/usage/button/theming/colors/vue.md new file mode 100644 index 00000000000..7fee983d696 --- /dev/null +++ b/static/usage/button/theming/colors/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/button/theming/css-properties/angular/example_component_css.md b/static/usage/button/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..fa985cbe82f --- /dev/null +++ b/static/usage/button/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,22 @@ +```css +ion-button { + --background: #93e9be; + --background-hover: #9ce0be; + --background-activated: #88f4be; + --background-focused: #88f4be; + + --color: blue; + + --border-radius: 0; + --border-color: #000; + --border-style: solid; + --border-width: 1px; + + --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25); + + --ripple-color: deeppink; + + --padding-top: 10px; + --padding-bottom: 10px; +} +``` diff --git a/static/usage/button/theming/css-properties/angular/example_component_html.md b/static/usage/button/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..678df6cde1b --- /dev/null +++ b/static/usage/button/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Custom Button +``` diff --git a/static/usage/button/theming/css-properties/demo.html b/static/usage/button/theming/css-properties/demo.html new file mode 100644 index 00000000000..ee2bec46668 --- /dev/null +++ b/static/usage/button/theming/css-properties/demo.html @@ -0,0 +1,47 @@ + + + + + + + Button + + + + + + + + + + + +
+ Custom Button +
+ + + + + diff --git a/static/usage/button/theming/css-properties/index.md b/static/usage/button/theming/css-properties/index.md new file mode 100644 index 00000000000..ad66bc9834d --- /dev/null +++ b/static/usage/button/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import reactTSX from './react/main_tsx.md'; +import reactCSS from './react/main_css.md'; + +import vue from './vue.md'; + +import angularHTML from './angular/example_component_html.md'; +import angularCSS from './angular/example_component_css.md'; + + diff --git a/static/usage/button/theming/css-properties/javascript.md b/static/usage/button/theming/css-properties/javascript.md new file mode 100644 index 00000000000..8bca67a3206 --- /dev/null +++ b/static/usage/button/theming/css-properties/javascript.md @@ -0,0 +1,26 @@ +```html + + +Custom Button +``` diff --git a/static/usage/button/theming/css-properties/react/main_css.md b/static/usage/button/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..1fba4c49972 --- /dev/null +++ b/static/usage/button/theming/css-properties/react/main_css.md @@ -0,0 +1,23 @@ + +```css +ion-button { + --background: #93e9be; + --background-hover: #9ce0be; + --background-activated: #88f4be; + --background-focused: #88f4be; + + --color: blue; + + --border-radius: 0; + --border-color: #000; + --border-style: solid; + --border-width: 1px; + + --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25); + + --ripple-color: deeppink; + + --padding-top: 10px; + --padding-bottom: 10px; +} +``` diff --git a/static/usage/button/theming/css-properties/react/main_tsx.md b/static/usage/button/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..6e0cddd9709 --- /dev/null +++ b/static/usage/button/theming/css-properties/react/main_tsx.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + Custom Button + ); +} +export default Example; +``` diff --git a/static/usage/button/theming/css-properties/vue.md b/static/usage/button/theming/css-properties/vue.md new file mode 100644 index 00000000000..0243821d67f --- /dev/null +++ b/static/usage/button/theming/css-properties/vue.md @@ -0,0 +1,37 @@ +```html + + + + + +```