Button
Buttons are simple components in Ionic. They can consist of text and icons and be enhanced by a wide range of attributes.
Component
selector: button:not([ion-item]),[button]
Attributes:
| Attribute | Description |
|---|---|
| outline | A transparent button with a border. |
| clear | A transparent button without a border. |
| round | A button with rounded corners. |
| block | A button that fills its parent container with a border-radius. |
| full | A button that fills its parent container without a border-radius or borders on the left/right. |
| small | A button with size small. |
| large | A button with size large. |
| disabled | A disabled button. |
| fab | A floating action button. |
| fab-left | Position a fab button to the left. |
| fab-right | Position a fab button to the right. |
| fab-center | Position a fab button towards the center. |
| fab-top | Position a fab button towards the top. |
| fab-bottom | Position a fab button towards the bottom. |
| color | Dynamically set which predefined color this button should use (e.g. default, secondary, danger, etc). |
Input Properties
| Attr | Type | Details |
|---|---|---|
| category | string |
The category of the button. |
| large | string |
Large button. |
| small | string |
Small button. |
| default | string |
Default button. |
| outline | string |
A transparent button with a border. |
| clear | string |
A transparent button without a border. |
| solid | string |
Force a solid button. Useful for buttons within an item. |
| round | string |
A button with rounded corners. |
| block | string |
A button that fills its parent container with a border-radius. |
| full | string |
A button that fills its parent container without a border-radius or borders on the left/right. |
| color | string |
Dynamically set which predefined color this button should use (e.g. default, secondary, danger, etc). |