ionic button

1<ion-button expand="full" fill="outline">Outline + Full</ion-button>

1ion-button{
2  --background: #0869AE;
3  --border-radius: 20px;
4}

1<ion-button (click)="onClick()" fill="clear">
2      <ion-icon slot="icon-only" name="home"></ion-icon>
3</ion-button>
4
5

1<!-- Default -->
2<ion-button>Default</ion-button>
3
4<!-- Anchor -->
5<ion-button href="#">Anchor</ion-button>
6
7<!-- Colors -->
8<ion-button color="primary">Primary</ion-button>
9<ion-button color="secondary">Secondary</ion-button>
10<ion-button color="tertiary">Tertiary</ion-button>
11<ion-button color="success">Success</ion-button>
12<ion-button color="warning">Warning</ion-button>
13<ion-button color="danger">Danger</ion-button>
14<ion-button color="light">Light</ion-button>
15<ion-button color="medium">Medium</ion-button>
16<ion-button color="dark">Dark</ion-button>
17
18<!-- Expand -->
19<ion-button expand="full">Full Button</ion-button>
20<ion-button expand="block">Block Button</ion-button>
21
22<!-- Round -->
23<ion-button shape="round">Round Button</ion-button>
24
25<!-- Fill -->
26<ion-button expand="full" fill="outline">Outline + Full</ion-button>
27<ion-button expand="block" fill="outline">Outline + Block</ion-button>
28<ion-button shape="round" fill="outline">Outline + Round</ion-button>
29
30<!-- Icons -->
31<ion-button>
32  <ion-icon slot="start" name="star"></ion-icon>
33  Left Icon
34</ion-button>
35
36<ion-button>
37  Right Icon
38  <ion-icon slot="end" name="star"></ion-icon>
39</ion-button>
40
41<ion-button>
42  <ion-icon slot="icon-only" name="star"></ion-icon>
43</ion-button>
44
45<!-- Sizes -->
46<ion-button size="large">Large</ion-button>
47<ion-button>Default</ion-button>
48<ion-button size="small">Small</ion-button>

1<ion-card>
2  <ion-card-header>
3    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
4    <ion-card-title>Card Title</ion-card-title>
5  </ion-card-header>
6
7  <ion-card-content>
8    Keep close to Nature's heart... and break clear away, once in awhile,
9    and climb a mountain or spend a week in the woods. Wash your spirit clean.
10  </ion-card-content>
11</ion-card>
12
13<ion-card>
14  <ion-item>
15    <ion-icon name="pin" slot="start"></ion-icon>
16    <ion-label>ion-item in a card, icon left, button right</ion-label>
17    <ion-button fill="outline" slot="end">View</ion-button>
18  </ion-item>
19
20  <ion-card-content>
21    This is content, without any paragraph or header tags,
22    within an ion-card-content element.
23  </ion-card-content>
24</ion-card>
25
26<ion-card>
27  <ion-item href="#" class="ion-activated">
28    <ion-icon name="wifi" slot="start"></ion-icon>
29    <ion-label>Card Link Item 1 activated</ion-label>
30  </ion-item>
31
32  <ion-item href="#">
33    <ion-icon name="wine" slot="start"></ion-icon>
34    <ion-label>Card Link Item 2</ion-label>
35  </ion-item>
36
37  <ion-item class="ion-activated">
38    <ion-icon name="warning" slot="start"></ion-icon>
39    <ion-label>Card Button Item 1 activated</ion-label>
40  </ion-item>
41
42  <ion-item>
43    <ion-icon name="walk" slot="start"></ion-icon>
44    <ion-label>Card Button Item 2</ion-label>
45  </ion-item>
46</ion-card>

1<ion-button color="primary" fill="outline">Primary</ion-button>