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

block

boolean

buttonType

string

clear

boolean

color

string

default

boolean

disabled

boolean

full

boolean

href

string

itemButton

boolean

large

boolean

mode

any

outline

boolean

round

boolean

small

boolean

solid

boolean

strong

boolean

Attributes

block

boolean

buttonType

string

clear

boolean

color

string

default

boolean

disabled

boolean

full

boolean

href

string

itemButton

boolean

large

boolean

mode

any

outline

boolean

round

boolean

small

boolean

solid

boolean

strong

boolean

---

Built by StencilJS