Button
[ion-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 |
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: |
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
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 |
Related
Button Component Docs, FabButton Docs, FabButton API Docs, FabContainer API Docs