Using the Ionic Button Component
Learn the changes to the Ionic button component that were introduced in version 4. Understand how to change the style and size of the button and how to quickly include an icon.
Instructor: [00:00] In Ionic 3, buttons were defined using a standard button null-it then applying the ion-button directive to it. With the shift to Web components, this approach no longer worked. The Ionic button is now again defined using the ion-button.
[00:16] In addition, many of the attributes have also changed to follow Web component usage. Changing the fill and border of the button is now using the fill attribute. For buttons not in a toolbar component, this will be solid.
[00:31] If you want a clear button, set the fill to clear. This is useful for providing a large tap target for the user to interact with. If you want the background to be transparent but have a visible border, we can set this value to Outline.
[00:49] If we need to have a button that has a different width, we can also set the expand attribute to either block or full. The ion-button is an in-line block element.
[01:00] If we set the expand attribute to either block or full, this changes the element to be a block element so that the full width will be its containing element.
[01:11] The difference between the two attributes is setting the attribute to block while applying rounded corners. While setting the value to full, we'll leave the button's corner square.
[01:22] Often, you'll want to include an icon on your button. To do this, you just need to add the Ion icon component. Set its name to the value if you're using in the Ion icon library, or its source attribute if you want a custom icon.
[01:36] To define if the icon is before or after the text, use the slot attribute on the Ion icon. If you want it to appear to the left, set it to start. If you want it after, set value to end. That is the new Ionic button component.