Button

`[ion-button]`

Buttons are simple components in Ionic. They can consist of text and icons and be enhanced by a wide range of attributes.

Usage

<!-- Colors -->
<button ion-button>Default</button>

<button ion-button color="secondary">Secondary</button>

<button ion-button color="danger">Danger</button>

<button ion-button color="light">Light</button>

<button ion-button color="dark">Dark</button>

<!-- Shapes -->
<button ion-button full>Full Button</button>

<button ion-button block>Block Button</button>

<button ion-button round>Round Button</button>

<!-- Outline -->
<button ion-button full outline>Outline + Full</button>

<button ion-button block outline>Outline + Block</button>

<button ion-button round outline>Outline + Round</button>

<!-- Icons -->
<button ion-button icon-start>
  <ion-icon name="star"></ion-icon>
  Left Icon
</button>

<button ion-button icon-end>
  Right Icon
  <ion-icon name="star"></ion-icon>
</button>

<button ion-button icon-only>
  <ion-icon name="star"></ion-icon>
</button>

<!-- Sizes -->
<button ion-button large>Large</button>

<button ion-button>Default</button>

<button ion-button small>Small</button>

Input Properties

Attr	Type	Details
block	`boolean`	If true, activates a button style that fills the available width.
clear	`boolean`	If true, activates a transparent button style without a border.
color	`string`	The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. For more information, see Theming your App.
default	`boolean`	If true, activates the default button size. Normally the default, useful for buttons in an item.
full	`boolean`	If true, activates a button style that fills the available width without a left and right border.
large	`boolean`	If true, activates the large button size.
mode	`string`	The mode determines which platform styles to use. Possible values are: `"ios"`, `"md"`, or `"wp"`. For more information, see Platform Styles.
outline	`boolean`	If true, activates a transparent button style with a border.
round	`boolean`	If true, activates a button with rounded corners.
small	`boolean`	If true, activates the small button size.
solid	`boolean`	If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
strong	`boolean`	If true, activates a button with a heavier font weight.

Advanced

<!-- Bind the color and outline inputs to an expression -->
<button ion-button [color]="isDanger ? 'danger' : 'primary'" [outline]="isOutline">
  Danger (Solid)
</button>

<!-- Bind the color and round inputs to an expression -->
<button ion-button [color]="myColor" [round]="isRound">
  Secondary (Round)
</button>

<!-- Bind the color and clear inputs to an expression -->
<button ion-button [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">
  Primary (Clear)
</button>

<!-- Bind the color, outline and round inputs to an expression -->
<button ion-button [color]="myColor2" [outline]="isOutline" [round]="isRound">
  Dark (Solid + Round)
</button>

<!-- Bind the click event to a method -->
<button ion-button (click)="logEvent($event)">
  Click me!
</button>

@Component({
  templateUrl: 'main.html'
})
class E2EPage {
  isDanger: boolean = true;
  isSecondary: boolean = false;
  isRound: boolean = true;
  isOutline: boolean = false;
  isClear: boolean = true;
  myColor: string = 'secondary';
  myColor2: string = 'dark';

  logEvent(event) {
    console.log(event)
  }
}

Sass Variables

All iOS Material Design Windows Platform

Property	Default	Description
`$button-round-padding-top`	`0`	Padding top of the round button
`$button-round-padding-end`	`2.6rem`	Padding end of the round button
`$button-round-padding-bottom`	`$button-round-padding-top`	Padding bottom of the round button
`$button-round-padding-start`	`$button-round-padding-end`	Padding start of the round button
`$button-round-border-radius`	`64px`	Border radius of the round button

Property	Default	Description
`$button-ios-margin-top`	`.4rem`	Margin top of the button
`$button-ios-margin-end`	`.2rem`	Margin end of the button
`$button-ios-margin-bottom`	`.4rem`	Margin bottom of the button
`$button-ios-margin-start`	`.2rem`	Margin start of the button
`$button-ios-padding-top`	`0`	Padding top of the button
`$button-ios-padding-end`	`1em`	Padding end of the button
`$button-ios-padding-bottom`	`$button-ios-padding-top`	Padding bottom of the button
`$button-ios-padding-start`	`$button-ios-padding-end`	Padding start of the button
`$button-ios-height`	`2.8em`	Height of the button
`$button-ios-border-radius`	`4px`	Border radius of the button
`$button-ios-font-size`	`1.6rem`	Font size of the button text
`$button-ios-background-color`	`color($colors-ios, primary)`	Background color of the button
`$button-ios-text-color`	`color-contrast($colors-ios, $button-ios-background-color)`	Text color of the button
`$button-ios-background-color-activated`	`color-shade($button-ios-background-color)`	Background color of the activated button
`$button-ios-opacity-activated`	`1`	Opacity of the activated button
`$button-ios-opacity-hover`	`.8`	Opacity of the button on hover
`$button-ios-large-padding-top`	`0`	Padding top of the large button
`$button-ios-large-padding-end`	`1em`	Padding end of the large button
`$button-ios-large-padding-bottom`	`$button-ios-large-padding-top`	Padding bottom of the large button
`$button-ios-large-padding-start`	`$button-ios-large-padding-end`	Padding start of the large button
`$button-ios-large-height`	`2.8em`	Height of the large button
`$button-ios-large-font-size`	`2rem`	Font size of the large button
`$button-ios-small-padding-top`	`0`	Padding top of the small button
`$button-ios-small-padding-end`	`.9em`	Padding end of the small button
`$button-ios-small-padding-bottom`	`$button-ios-small-padding-top`	Padding bottom of the small button
`$button-ios-small-padding-start`	`$button-ios-small-padding-end`	Padding start of the small button
`$button-ios-small-height`	`2.1em`	Height of the small button
`$button-ios-small-font-size`	`1.3rem`	Font size of the small button
`$button-ios-small-icon-font-size`	`1.3em`	Font size of an icon in the small button
`$button-ios-outline-border-width`	`1px`	Border width of the outline button
`$button-ios-outline-border-style`	`solid`	Border style of the outline button
`$button-ios-outline-border-radius`	`$button-ios-border-radius`	Border radius of the outline button
`$button-ios-outline-border-color`	`$button-ios-background-color`	Border color of the outline button
`$button-ios-outline-text-color`	`$button-ios-background-color`	Text color of the outline button
`$button-ios-outline-background-color`	`transparent`	Background color of the outline button
`$button-ios-outline-text-color-activated`	`color-contrast($colors-ios, $button-ios-background-color)`	Text color of the activated outline button
`$button-ios-outline-background-color-activated`	`$button-ios-background-color`	Background color of the activated outline button
`$button-ios-outline-opacity-activated`	`1`	Opacity of the activated outline button
`$button-ios-clear-border-color`	`transparent`	Border color of the clear button
`$button-ios-clear-background-color`	`transparent`	Background color of the clear button
`$button-ios-clear-background-color-activated`	`$button-ios-clear-background-color`	Background color of the activated clear button
`$button-ios-clear-opacity-activated`	`.4`	Opacity of the activated clear button
`$button-ios-clear-text-color-hover`	`$button-ios-background-color`	Text color of the clear button on hover
`$button-ios-clear-opacity-hover`	`.6`	Opacity of the clear button on hover
`$button-ios-round-padding-top`	`$button-round-padding-top`	Padding top of the round button
`$button-ios-round-padding-end`	`$button-round-padding-end`	Padding end of the round button
`$button-ios-round-padding-bottom`	`$button-round-padding-bottom`	Padding bottom of the round button
`$button-ios-round-padding-start`	`$button-round-padding-start`	Padding start of the round button
`$button-ios-round-border-radius`	`$button-round-border-radius`	Border radius of the round button
`$button-ios-strong-font-weight`	`600`	Font weight of the strong button

Property	Default	Description
`$button-md-margin-top`	`.4rem`	Margin top of the button
`$button-md-margin-end`	`.2rem`	Margin end of the button
`$button-md-margin-bottom`	`.4rem`	Margin bottom of the button
`$button-md-margin-start`	`.2rem`	Margin start of the button
`$button-md-padding-top`	`0`	Padding top of the button
`$button-md-padding-end`	`1.1em`	Padding end of the button
`$button-md-padding-bottom`	`$button-md-padding-top`	Padding bottom of the button
`$button-md-padding-start`	`$button-md-padding-end`	Padding start of the button
`$button-md-height`	`3.6rem`	Height of the button
`$button-md-border-radius`	`2px`	Border radius of the button
`$button-md-font-size`	`1.4rem`	Font size of the button text
`$button-md-font-weight`	`500`	Font weight of the button text
`$button-md-text-transform`	`uppercase`	Capitalization of the button text
`$button-md-background-color`	`color($colors-md, primary)`	Background color of the button
`$button-md-text-color`	`color-contrast($colors-md, $button-md-background-color)`	Text color of the button
`$button-md-box-shadow`	`0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)`	Box shadow of the button
`$button-md-transition-duration`	`300ms`	Duration of the transition of the button
`$button-md-transition-timing-function`	`cubic-bezier(.4, 0, .2, 1)`	Speed curve of the transition of the button
`$button-md-background-color-hover`	`$button-md-background-color`	Background color of the button on hover
`$button-md-background-color-activated`	`color-shade($button-md-background-color)`	Background color of the activated button
`$button-md-opacity-activated`	`1`	Opacity of the activated button
`$button-md-box-shadow-activated`	`0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21), 0 0 0 0 transparent`	Box shadow of the activated button
`$button-md-ripple-background-color`	`#555`	Background color of the ripple on the button
`$button-md-large-padding-top`	`0`	Padding top of the large button
`$button-md-large-padding-end`	`1em`	Padding end of the large button
`$button-md-large-padding-bottom`	`$button-md-large-padding-top`	Padding bottom of the large button
`$button-md-large-padding-start`	`$button-md-large-padding-end`	Padding start of the large button
`$button-md-large-height`	`2.8em`	Height of the large button
`$button-md-large-font-size`	`2rem`	Font size of the large button
`$button-md-small-padding-top`	`0`	Padding top of the small button
`$button-md-small-padding-end`	`.9em`	Padding end of the small button
`$button-md-small-padding-bottom`	`$button-md-small-padding-top`	Padding bottom of the small button
`$button-md-small-padding-start`	`$button-md-small-padding-end`	Padding start of the small button
`$button-md-small-height`	`2.1em`	Height of the small button
`$button-md-small-font-size`	`1.3rem`	Font size of the small button
`$button-md-small-icon-font-size`	`1.4em`	Font size of an icon in the small button
`$button-md-outline-border-width`	`1px`	Border width of the outline button
`$button-md-outline-border-style`	`solid`	Border style of the outline button
`$button-md-outline-border-color`	`$button-md-background-color`	Border color of the outline button
`$button-md-outline-text-color`	`$button-md-background-color`	Text color of the outline button
`$button-md-outline-background-color`	`transparent`	Background color of the outline button
`$button-md-outline-box-shadow`	`none`	Box shadow of the outline button
`$button-md-outline-background-color-hover`	`rgba(158, 158, 158, .1)`	Background color of the outline button on hover
`$button-md-outline-background-color-activated`	`transparent`	Background color of the activated outline button
`$button-md-outline-box-shadow-activated`	`none`	Box shadow of the activated outline button
`$button-md-outline-opacity-activated`	`1`	Opacity of the activated outline button
`$button-md-outline-ripple-background-color`	`$button-md-background-color`	Background color of the ripple on the outline button
`$button-md-clear-border-color`	`transparent`	Border color of the clear button
`$button-md-clear-text-color`	`$button-md-background-color`	Text color of the clear button
`$button-md-clear-background-color`	`transparent`	Background color of the clear button
`$button-md-clear-box-shadow`	`none`	Box shadow of the clear button
`$button-md-clear-opacity`	`1`	Opacity of the clear button
`$button-md-clear-background-color-activated`	`rgba(158, 158, 158, .2)`	Background color of the activated clear button
`$button-md-clear-box-shadow-activated`	`$button-md-clear-box-shadow`	Box shadow of the activated clear button
`$button-md-clear-background-color-hover`	`rgba(158, 158, 158, .1)`	Background color of the clear button on hover
`$button-md-clear-ripple-background-color`	`#999`	Background color of the ripple on the clear button
`$button-md-round-padding-top`	`$button-round-padding-top`	Padding top of the round button
`$button-md-round-padding-end`	`$button-round-padding-end`	Padding end of the round button
`$button-md-round-padding-bottom`	`$button-round-padding-bottom`	Padding bottom of the round button
`$button-md-round-padding-start`	`$button-round-padding-start`	Padding start of the round button
`$button-md-round-border-radius`	`$button-round-border-radius`	Border radius of the round button
`$button-md-strong-font-weight`	`bold`	Font weight of the strong button

Property	Default	Description
`$button-wp-margin-top`	`.4rem`	Margin top of the button
`$button-wp-margin-end`	`.2rem`	Margin end of the button
`$button-wp-margin-bottom`	`.4rem`	Margin bottom of the button
`$button-wp-margin-start`	`.2rem`	Margin start of the button
`$button-wp-padding-top`	`0`	Padding top of the button
`$button-wp-padding-end`	`1.1em`	Padding end of the button
`$button-wp-padding-bottom`	`$button-wp-padding-top`	Padding bottom of the button
`$button-wp-padding-start`	`$button-wp-padding-end`	Padding start of the button
`$button-wp-height`	`3.6rem`	Height of the button
`$button-wp-border-width`	`3px`	Border width of the button
`$button-wp-border-style`	`solid`	Border style of the button
`$button-wp-border-color`	`transparent`	Border color of the button
`$button-wp-border-radius`	`0`	Border radius of the button
`$button-wp-font-size`	`1.4rem`	Font size of the button text
`$button-wp-background-color`	`color($colors-wp, primary)`	Background color of the button
`$button-wp-text-color`	`color-contrast($colors-wp, $button-wp-background-color)`	Text color of the button
`$button-wp-background-color-activated`	`color-shade($button-wp-background-color)`	Background color of the activated button
`$button-wp-large-padding-top`	`0`	Padding top of the large button
`$button-wp-large-padding-end`	`1em`	Padding end of the large button
`$button-wp-large-padding-bottom`	`$button-wp-large-padding-top`	Padding bottom of the large button
`$button-wp-large-padding-start`	`$button-wp-large-padding-end`	Padding start of the large button
`$button-wp-large-height`	`2.8em`	Height of the large button
`$button-wp-large-font-size`	`2rem`	Font size of the large button
`$button-wp-small-padding-top`	`0`	Padding top of the small button
`$button-wp-small-padding-end`	`.9em`	Padding end of the small button
`$button-wp-small-padding-bottom`	`$button-wp-small-padding-top`	Padding bottom of the small button
`$button-wp-small-padding-start`	`$button-wp-small-padding-end`	Padding start of the small button
`$button-wp-small-height`	`2.1em`	Height of the small button
`$button-wp-small-font-size`	`1.3rem`	Font size of the small button
`$button-wp-small-icon-font-size`	`1.4em`	Font size of an icon in the small button
`$button-wp-outline-border-width`	`1px`	Border width of the outline button
`$button-wp-outline-border-style`	`solid`	Border style of the outline button
`$button-wp-outline-border-color`	`$button-wp-background-color`	Border color of the outline button
`$button-wp-outline-text-color`	`$button-wp-background-color`	Text color of the outline button
`$button-wp-outline-background-color`	`transparent`	Background color of the outline button
`$button-wp-outline-background-color-activated`	`$button-wp-background-color`	Background color of the activated outline button
`$button-wp-outline-background-color-opacity-activated`	`.16`	Opacity of the background color of the activated outline button
`$button-wp-clear-text-color`	`$button-wp-background-color`	Text color of the clear button
`$button-wp-clear-background-color`	`transparent`	Background color of the clear button
`$button-wp-clear-background-color-activated`	`rgba(158, 158, 158, .2)`	Background color of the activated clear button
`$button-wp-clear-background-color-hover`	`rgba(158, 158, 158, .1)`	Background color of the clear button on hover
`$button-wp-round-padding-top`	`$button-round-padding-top`	Padding top of the round button
`$button-wp-round-padding-end`	`$button-round-padding-end`	Padding end of the round button
`$button-wp-round-padding-bottom`	`$button-round-padding-bottom`	Padding bottom of the round button
`$button-wp-round-padding-start`	`$button-round-padding-start`	Padding start of the round button
`$button-wp-round-border-radius`	`$button-round-border-radius`	Border radius of the round button
`$button-wp-strong-font-weight`	`bold`	Font weight of the strong button

Button Component Docs, FabButton Docs, FabButton API Docs, FabContainer API Docs

Button

`[ion-button]`

Usage

Input Properties

Advanced

Sass Variables

Related

API

Native

General