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 full>Full Button</ion-button>

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

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

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

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

<ion-button round 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 large>Large</ion-button>

<ion-button>Default</ion-button>

<ion-button 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