Working with Button Components
1. Using IonButton Component
| Property | Values | Description |
|---|---|---|
| color | 'primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark' |
Sets the color of the button |
| fill | 'solid', 'outline', 'clear' |
Defines the fill style of the button |
| size | 'small', 'default', 'large' |
Adjusts the size of the button |
| expand | 'block', 'full' |
Makes the button span full width or block |
| disabled | true, false |
Disables the button if set to true |
| strong | true, false |
Makes the button text bold |
Example: Button with Outline Style
<ion-button fill="outline" color="secondary">
Outline Button
</ion-button>2. Creating Solid Buttons
| Property | Values | Description |
|---|---|---|
| fill | "solid" |
Applies a solid background to the button. This is the default fill type. |
| color | "primary", "secondary", "tertiary", "success", "warning", "danger" |
Defines the color theme of the button. |
| size | "small", "medium", "large" |
Sets the size of the button. |
| expand | "block", "full" |
Expands the button to fill the container width. |
Example: Large Solid Button with Expand
<ion-button fill="solid" color="secondary" size="large" expand="block">
Full Width Button
</ion-button>3. Creating Outline Buttons
| Property | Values | Description |
|---|---|---|
| fill | "outline" |
Applies an outline style to the button |
| color | "primary", "secondary", "danger", etc. |
Defines the color scheme of the outline button |
| size | "small", "default", "large" |
Sets the size of the button |
Example: Colored Outline Button
<ion-button fill="outline" color="secondary">Secondary Outline</ion-button>4. Creating Clear Buttons
| Property | Values | Description |
|---|---|---|
| clear | true | false |
Sets the button to have no background or border. Default is false. |
| color | primary | secondary | success | warning | danger | light | medium | dark |
Applies a color to the button. Default is primary. |
| size | small | default | large |
Sets the size of the button. Default is default. |
5. Setting Button Sizes
| Property | Values | Description |
|---|---|---|
| size | small, default, large |
Sets the size of the button |
Example: Button sizes
<ion-button size="small">Small</ion-button>
<ion-button size="default">Default</ion-button>
<ion-button size="large">Large</ion-button>6. Using Block Buttons
| Property | Values | Description |
|---|---|---|
| expand | "block" |
Expands the button to fill the width of its container |
| size | "small", "default", "large" |
Adjusts the size of the button |
| fill | "solid", "outline", "clear" |
Defines the visual style of the button |
Note: Block buttons are ideal for full-width actions in forms or navigation lists.
7. Using Icon-Only Buttons
| Property | Values | Description |
|---|---|---|
| iconOnly | true |
Boolean flag to render button with only icon and no text |
| size | small, medium, large |
Sets the size of the icon-only button |
| fill | solid, outline, clear |
Determines the visual style of the button |
Example: Icon-Only Button with Ionicons
<ion-button icon-only="">
<ion-icon name="heart"></ion-icon>
</ion-button>Example: Large Icon-Only Button
<ion-button icon-only="" size="large">
<ion-icon name="star"></ion-icon>
</ion-button>
Note: Icon-only buttons should have accessible labels using
aria-label or title for screen readers.
8. Implementing Button States
| State | Description | Class/Property | Usage |
|---|---|---|---|
| default | Standard button state with no interaction | ion-button |
Basic button rendering |
| active | Button is currently pressed or selected | ion-button.active |
Visual feedback for active state |
| disabled | Button is not interactive and visually disabled | ion-button[disabled] |
Prevents interaction and shows disabled style |
| loading | Button displays loading indicator and is inactive | ion-button[loading] |
Used during async operations |
Example: Button States in Ionic
<ion-button>Default</ion-button>
<ion-button class="active">Active</ion-button>
<ion-button disabled>Disabled</ion-button>
<ion-button loading>Loading</ion-button>
Note: The
loading state automatically disables the button and shows a spinner.
9. Styling Button Shapes
| Shape | Description | Example |
|---|---|---|
| round | Rounds the button edges to create a circular shape. | <ion-button shape="round">Round</ion-button> |
| block | Stretches the button to fill the width of its container. | <ion-button shape="block">Block</ion-button> |
| full | Creates a button that is full-width and has no border. | <ion-button shape="full">Full</ion-button> |
Example: Button with Round Shape
<ion-button shape="round">
<ion-icon name="heart"></ion-icon>
</ion-button>10. Using Button Colors
| Color | Usage | Notes |
|---|---|---|
| primary | <ion-button color="primary">Primary</ion-button> |
Default brand color for the app |
| secondary | <ion-button color="secondary">Secondary</ion-button> |
Alternative color for actions |
| tertiary | <ion-button color="tertiary">Tertiary</ion-button> |
Used for less important actions |
| success | <ion-button color="success">Success</ion-button> |
For positive actions or confirmations |
| warning | <ion-button color="warning">Warning</ion-button> |
For caution or potentially destructive actions |
| danger | <ion-button color="danger">Danger</ion-button> |
For destructive actions like delete |
| light | <ion-button color="light">Light</ion-button> |
For light background buttons |
| medium | <ion-button color="medium">Medium</ion-button> |
For medium contrast buttons |
| dark | <ion-button color="dark">Dark</ion-button> |
For dark background buttons |