Skip to main content
Version: v8

ion-segment-button

shadow

Segment buttons are groups of related buttons inside of a segment. They are displayed in a horizontal row. A segment button can be selected by default by setting the value of the segment to the value of the segment button. Only one segment button can be selected at a time.

Basic Usage

Layout

The layout property is set to "icon-top" by default. When a segment button has both an icon and a label, it will display the icon on top of the label. This behavior can be changed by setting the layout property to "icon-bottom", "icon-start", or "icon-end" which will show the icon below the label, to the start of the label (left in LTR and right in RTL) or to the end of the label (right in LTR and left in RTL), respectively.

Theming

CSS Shadow Parts

CSS Custom Properties

Properties

disabled

DescriptionIf true, the user cannot interact with the segment button.
Attributedisabled
Typeboolean
Defaultfalse

layout

DescriptionSet the layout of the text and icon in the segment.
Attributelayout
Type"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined
Default'icon-top'

mode

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

type

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

value

DescriptionThe value of the segment button.
Attributevalue
Typenumber | string
Default'ion-sb-' + ids++

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
indicatorThe indicator displayed on the checked segment button.
indicator-backgroundThe background element for the indicator displayed on the checked segment button.
nativeThe native HTML button element that wraps all child elements.

CSS Custom Properties

NameDescription
--backgroundBackground of the segment button
--backgroundBackground of the segment button
--background-checkedBackground of the checked segment button
--background-checkedBackground of the checked segment button
--background-focusedBackground of the segment button when focused with the tab key
--background-focusedBackground of the segment button when focused with the tab key
--background-focused-opacityOpacity of the segment button background when focused with the tab key
--background-focused-opacityOpacity of the segment button background when focused with the tab key
--background-hoverBackground of the segment button on hover
--background-hoverBackground of the segment button on hover
--background-hover-opacityOpacity of the segment button background on hover
--background-hover-opacityOpacity of the segment button background on hover
--border-colorColor of the segment button border
--border-colorColor of the segment button border
--border-radiusRadius of the segment button border
--border-radiusRadius of the segment button border
--border-styleStyle of the segment button border
--border-styleStyle of the segment button border
--border-widthWidth of the segment button border
--border-widthWidth of the segment button border
--colorColor of the segment button
--colorColor of the segment button
--color-checkedColor of the checked segment button
--color-checkedColor of the checked segment button
--color-focusedColor of the segment button when focused with the tab key
--color-focusedColor of the segment button when focused with the tab key
--color-hoverColor of the segment button on hover
--color-hoverColor of the segment button on hover
--indicator-box-shadowBox shadow on the indicator for the checked segment button
--indicator-box-shadowBox shadow on the indicator for the checked segment button
--indicator-colorColor of the indicator for the checked segment button
--indicator-colorColor of the indicator for the checked segment button
--indicator-heightHeight of the indicator for the checked segment button
--indicator-heightHeight of the indicator for the checked segment button
--indicator-transformTransform of the indicator for the checked segment button
--indicator-transformTransform of the indicator for the checked segment button
--indicator-transitionTransition of the indicator for the checked segment button
--indicator-transitionTransition of the indicator for the checked segment button
--margin-bottomBottom margin of the segment button
--margin-bottomBottom margin of the segment button
--margin-endRight margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button
--margin-endRight margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button
--margin-startLeft margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button
--margin-startLeft margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button
--margin-topTop margin of the segment button
--margin-topTop margin of the segment button
--padding-bottomBottom padding of the segment button
--padding-bottomBottom padding of the segment button
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button
--padding-topTop padding of the segment button
--padding-topTop padding of the segment button
--transitionTransition of the segment button
--transitionTransition of the segment button

Slots

No slots available for this component.