Using the Ionic Button Component

Chris Griffith
InstructorChris Griffith
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

egghead
egghead
~ 13 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today