Ionic Buttons

by Ben Clayton

HTML

<body style="--button-font-size:40px">

        <link href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css" rel="stylesheet" />
        <script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>
				
				
				
			<!-- https://ionicframework.com/docs/api/components/button/Button/ -->
			
				<ion-button color="danger" full >Danger</ion-button>
				
<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>


</body>