ion-alert

 
--backdrop-opacity
Copied!
Opacity of the backdrop
--background
Copied!
Background of the alert
--height
Copied!
Height of the alert
--max-height
Copied!
Maximum height of the alert
--max-width
Copied!
Maximum width of the alert
--min-height
Copied!
Minimum height of the alert
--min-width
Copied!
Minimum width of the alert
--width
Copied!
Width of the alert

ion-back-button

 
--background
Copied!
Background of the button
--background-focused
Copied!
Background of the button when focused with the tab key
--background-focused-opacity
Copied!
Opacity of the button background when focused with the tab key
--background-hover
Copied!
Background of the button on hover
--background-hover-opacity
Copied!
Opacity of the background on hover
--border-radius
Copied!
Border radius of the button
--color
Copied!
Text color of the button
--color-focused
Copied!
Text color of the button when focused with the tab key
--color-hover
Copied!
Text color of the button on hover
--icon-font-size
Copied!
Font size of the button icon
--icon-font-weight
Copied!
Font weight of the button icon
--icon-margin-bottom
Copied!
Bottom margin of the button icon
--icon-margin-end
Copied!
Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon
--icon-margin-start
Copied!
Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon
--icon-margin-top
Copied!
Top margin of the button icon
--icon-padding-bottom
Copied!
Bottom padding of the button icon
--icon-padding-end
Copied!
Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon
--icon-padding-start
Copied!
Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon
--icon-padding-top
Copied!
Top padding of the button icon
--margin-bottom
Copied!
Bottom margin of the button
--margin-end
Copied!
Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button
--margin-start
Copied!
Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button
--margin-top
Copied!
Top margin of the button
--min-height
Copied!
Minimum height of the button
--min-width
Copied!
Minimum width of the button
--opacity
Copied!
Opacity of the button
--padding-bottom
Copied!
Bottom padding of the button
--padding-end
Copied!
Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
--padding-start
Copied!
Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
--padding-top
Copied!
Top padding of the button
--ripple-color
Copied!
Color of the button ripple effect
--transition
Copied!
Transition of the button

ion-badge

 
--background
Copied!
Background of the badge
--color
Copied!
Text color of the badge
--padding-bottom
Copied!
Bottom padding of the badge
--padding-end
Copied!
Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge
--padding-start
Copied!
Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
--padding-top
Copied!
Top padding of the badge

ion-breadcrumb

 
--background-focused
Copied!
Background color of the breadcrumb when focused
--color
Copied!
Text color of the breadcrumb
--color-active
Copied!
Text color of the active breadcrumb
--color-focused
Copied!
Text color of the breadcrumb when focused
--color-hover
Copied!
Text color of the breadcrumb on hover

ion-card-subtitle

 
--color
Copied!
Color of the card subtitle

ion-card-title

 
--color
Copied!
Color of the card title

ion-col

 
--ion-grid-column-padding
Copied!
Padding for the Column
--ion-grid-column-padding-lg
Copied!
Padding for the Column on lg screens and up
--ion-grid-column-padding-md
Copied!
Padding for the Column on md screens and up
--ion-grid-column-padding-sm
Copied!
Padding for the Column on sm screens and up
--ion-grid-column-padding-xl
Copied!
Padding for the Column on xl screens and up
--ion-grid-column-padding-xs
Copied!
Padding for the Column on xs screens and up
--ion-grid-columns
Copied!
The number of total Columns in the Grid

ion-datetime

 
--background
Copied!
The primary background of the datetime component.
--background-rgb
Copied!
The primary background of the datetime component in RGB format.
--title-color
Copied!
The text color of the title.
--wheel-fade-background-rgb
Copied!
The color of the gradient covering non-selected items when using a wheel style layout, or in the month/year picker for grid style layouts. Must be in RGB format, e.g. 255, 255, 255.
--wheel-highlight-background
Copied!
The background of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts.

ion-fab-button

 
--background
Copied!
Background of the button
--background-activated
Copied!
Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
--background-activated-opacity
Copied!
Opacity of the button background when pressed
--background-focused
Copied!
Background of the button when focused with the tab key
--background-focused-opacity
Copied!
Opacity of the button background when focused with the tab key
--background-hover
Copied!
Background of the button on hover
--background-hover-opacity
Copied!
Opacity of the button background on hover
--border-color
Copied!
Border color of the button
--border-radius
Copied!
Border radius of the button
--border-style
Copied!
Border style of the button
--border-width
Copied!
Border width of the button
--box-shadow
Copied!
Box shadow of the button
--close-icon-font-size
Copied!
Font size of the close icon
--color
Copied!
Text color of the button
--color-activated
Copied!
Text color of the button when pressed
--color-focused
Copied!
Text color of the button when focused with the tab key
--color-hover
Copied!
Text color of the button on hover
--padding-bottom
Copied!
Bottom padding of the button
--padding-end
Copied!
Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
--padding-start
Copied!
Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
--padding-top
Copied!
Top padding of the button
--ripple-color
Copied!
Color of the button ripple effect
--transition
Copied!
Transition of the button

ion-grid

 
--ion-grid-padding
Copied!
Padding for the Grid
--ion-grid-padding-lg
Copied!
Padding for the Grid on lg screens
--ion-grid-padding-md
Copied!
Padding for the Grid on md screens
--ion-grid-padding-sm
Copied!
Padding for the Grid on sm screens
--ion-grid-padding-xl
Copied!
Padding for the Grid on xl screens
--ion-grid-padding-xs
Copied!
Padding for the Grid on xs screens
--ion-grid-width
Copied!
Width of the fixed Grid
--ion-grid-width-lg
Copied!
Width of the fixed Grid on lg screens
--ion-grid-width-md
Copied!
Width of the fixed Grid on md screens
--ion-grid-width-sm
Copied!
Width of the fixed Grid on sm screens
--ion-grid-width-xl
Copied!
Width of the fixed Grid on xl screens
--ion-grid-width-xs
Copied!
Width of the fixed Grid on xs screens

ion-item-option

 
--background
Copied!
Background of the item option
--color
Copied!
Color of the item option

ion-label

 
--color
Copied!
Color of the label. This property is only available when using ion-label inside of an ion-item.

ion-loading

 
--backdrop-opacity
Copied!
Opacity of the backdrop
--background
Copied!
Background of the loading dialog
--height
Copied!
Height of the loading dialog
--max-height
Copied!
Maximum height of the loading dialog
--max-width
Copied!
Maximum width of the loading dialog
--min-height
Copied!
Minimum height of the loading dialog
--min-width
Copied!
Minimum width of the loading dialog
--spinner-color
Copied!
Color of the loading spinner
--width
Copied!
Width of the loading dialog

ion-menu

 
--background
Copied!
Background of the menu
--height
Copied!
Height of the menu
--max-height
Copied!
Maximum height of the menu
--max-width
Copied!
Maximum width of the menu
--min-height
Copied!
Minimum height of the menu
--min-width
Copied!
Minimum width of the menu
--width
Copied!
Width of the menu

ion-menu-button

 
--background
Copied!
Background of the menu button
--background-focused
Copied!
Background of the menu button when focused with the tab key
--background-focused-opacity
Copied!
Opacity of the menu button background when focused with the tab key
--background-hover
Copied!
Background of the menu button on hover
--background-hover-opacity
Copied!
Opacity of the background on hover
--border-radius
Copied!
Border radius of the menu button
--color
Copied!
Color of the menu button
--color-focused
Copied!
Color of the menu button when focused with the tab key
--color-hover
Copied!
Color of the menu button on hover
--padding-bottom
Copied!
Bottom padding of the button
--padding-end
Copied!
Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
--padding-start
Copied!
Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
--padding-top
Copied!
Top padding of the button

ion-modal

 
--backdrop-opacity
Copied!
Opacity of the backdrop
--background
Copied!
Background of the modal content
--border-color
Copied!
Border color of the modal content
--border-radius
Copied!
Border radius of the modal content
--border-style
Copied!
Border style of the modal content
--border-width
Copied!
Border width of the modal content
--height
Copied!
Height of the modal
--max-height
Copied!
Maximum height of the modal
--max-width
Copied!
Maximum width of the modal
--min-height
Copied!
Minimum height of the modal
--min-width
Copied!
Minimum width of the modal
--width
Copied!
Width of the modal

ion-picker

 
--backdrop-opacity
Copied!
Opacity of the backdrop
--background
Copied!
Background of the picker
--background-rgb
Copied!
Background of the picker in rgb format
--border-color
Copied!
Border color of the picker
--border-radius
Copied!
Border radius of the picker
--border-style
Copied!
Border style of the picker
--border-width
Copied!
Border width of the picker
--height
Copied!
Height of the picker
--max-height
Copied!
Maximum height of the picker
--max-width
Copied!
Maximum width of the picker
--min-height
Copied!
Minimum height of the picker
--min-width
Copied!
Minimum width of the picker
--width
Copied!
Width of the picker

ion-popover

 
--backdrop-opacity
Copied!
Opacity of the backdrop
--background
Copied!
Background of the popover
--box-shadow
Copied!
Box shadow of the popover
--height
Copied!
Height of the popover
--max-height
Copied!
Maximum height of the popover
--max-width
Copied!
Maximum width of the popover
--min-height
Copied!
Minimum height of the popover
--min-width
Copied!
Minimum width of the popover
--offset-x
Copied!
The amount to move the popover by on the x-axis
--offset-y
Copied!
The amount to move the popover by on the y-axis
--width
Copied!
Width of the popover

ion-router-link

 
--background
Copied!
Background of the router link
--color
Copied!
Text color of the router link

ion-select

 
--background
Copied!
Background of the select
--border-color
Copied!
Color of the select border
--border-radius
Copied!
Radius of the select border. A large radius may display unevenly when using fill="outline"; if needed, use shape="round" instead or increase --padding-start.
--border-style
Copied!
Style of the select border
--border-width
Copied!
Width of the select border
--highlight-color-focused
Copied!
The color of the highlight on the select when focused
--highlight-color-invalid
Copied!
The color of the highlight on the select when invalid
--highlight-color-valid
Copied!
The color of the highlight on the select when valid
--padding-bottom
Copied!
Bottom padding of the select
--padding-end
Copied!
Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select
--padding-start
Copied!
Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select
--padding-top
Copied!
Top padding of the select
--placeholder-color
Copied!
Color of the select placeholder text
--placeholder-opacity
Copied!
Opacity of the select placeholder text
--ripple-color
Copied!
The color of the ripple effect on MD mode.

ion-tab-bar

 
--background
Copied!
Background of the tab bar
--border
Copied!
Border of the tab bar
--color
Copied!
Color of the tab bar

ion-tab-button

 
--background
Copied!
Background of the tab button
--background-focused
Copied!
Background of the tab button when focused with the tab key
--background-focused-opacity
Copied!
Opacity of the tab button background when focused with the tab key
--color
Copied!
Color of the tab button
--color-focused
Copied!
Color of the tab button when focused with the tab key
--color-selected
Copied!
Color of the selected tab button
--padding-bottom
Copied!
Bottom padding of the tab button
--padding-end
Copied!
Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button
--padding-start
Copied!
Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button
--padding-top
Copied!
Top padding of the tab button
--ripple-color
Copied!
Color of the button ripple effect

ion-textarea

 
--background
Copied!
Background of the textarea
--border-color
Copied!
Color of the border below the textarea when using helper text, error text, or counter
--border-radius
Copied!
Border radius of the textarea
--border-style
Copied!
Style of the border below the textarea when using helper text, error text, or counter
--border-width
Copied!
Width of the border below the textarea when using helper text, error text, or counter
--color
Copied!
Color of the text
--highlight-color-focused
Copied!
The color of the highlight on the textarea when focused
--highlight-color-invalid
Copied!
The color of the highlight on the textarea when invalid
--highlight-color-valid
Copied!
The color of the highlight on the textarea when valid
--padding-bottom
Copied!
Bottom padding of the textarea
--padding-end
Copied!
Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea
--padding-start
Copied!
Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea
--padding-top
Copied!
Top padding of the textarea
--placeholder-color
Copied!
Color of the placeholder text
--placeholder-font-style
Copied!
Style of the placeholder text
--placeholder-font-weight
Copied!
Weight of the placeholder text
--placeholder-opacity
Copied!
Opacity of the placeholder text

ion-toast

 
--background
Copied!
Background of the toast
--border-color
Copied!
Border color of the toast
--border-radius
Copied!
Border radius of the toast
--border-style
Copied!
Border style of the toast
--border-width
Copied!
Border width of the toast
--box-shadow
Copied!
Box shadow of the toast
--button-color
Copied!
Color of the button text
--color
Copied!
Color of the toast text
--end
Copied!
Position from the right if direction is left-to-right, and from the left if direction is right-to-left
--height
Copied!
Height of the toast
--max-height
Copied!
Maximum height of the toast
--max-width
Copied!
Maximum width of the toast
--min-height
Copied!
Minimum height of the toast
--min-width
Copied!
Minimum width of the toast
--start
Copied!
Position from the left if direction is left-to-right, and from the right if direction is right-to-left
--white-space
Copied!
White space of the toast message
--width
Copied!
Width of the toast