Skip to main content
Version: v6

ion-item-option

shadow

The item option component is an button for a sliding item. It must be placed inside of item options. The ionSwipe event and the expandable property can be combined to create a full swipe action for the item.

See the item sliding documentation for more information.

Properties

color

DescriptionThe color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

disabled

DescriptionIf true, the user cannot interact with the item option.
Attributedisabled
Typeboolean
Defaultfalse

download

DescriptionThis attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
Attributedownload
Typestring | undefined
Defaultundefined

expandable

DescriptionIf true, the option will expand to take up the available width and cover any other options.
Attributeexpandable
Typeboolean
Defaultfalse

href

DescriptionContains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attributehref
Typestring | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

rel

DescriptionSpecifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attributerel
Typestring | undefined
Defaultundefined

target

DescriptionSpecifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".
Attributetarget
Typestring | undefined
Defaultundefined

type

DescriptionThe type of the button.
Attributetype
Type"button" | "reset" | "submit"
Default'button'

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeThe native HTML button or anchor element that wraps all child elements.

CSS Custom Properties

NameDescription
--backgroundBackground of the item option
--colorColor of the item option

Slots

NameDescription
``Content is placed between the named slots if provided without a slot.
bottomContent is placed below the option text.
endContent is placed to the right of the option text in LTR, and to the left in RTL.
icon-onlyShould be used on an icon in an option that has no text.
startContent is placed to the left of the option text in LTR, and to the right in RTL.
topContent is placed above the option text.