ionic-framework/packages/core/src/components/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.

<!-- Colors -->
<ion-button>Default</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="dark">Dark</ion-button>

<!-- Shapes -->
<ion-button expand="full">Full Button</ion-button>
<ion-button expand="block">Block Button</ion-button>
<ion-button round>Round Button</ion-button>

<!-- Outline -->
<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button round fill="outline">Outline + Round</ion-button>

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

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

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

<!-- Sizes -->
<ion-button size="large">Large</ion-button>
<ion-button>Default</ion-button>
<ion-button size="small">Small</ion-button>

Properties

buttonType

string

color

string

disabled

boolean

expand

any

fill

any

href

string

itemButton

boolean

mode

any

round

boolean

size

any

strong

boolean

Attributes

buttonType

string

color

string

disabled

boolean

expand

any

fill

any

href

string

itemButton

boolean

mode

any

round

boolean

size

any

strong

boolean

---

Built by StencilJS