import Props from '@ionic-internal/component-api/v8/segment-button/props.md'; import Events from '@ionic-internal/component-api/v8/segment-button/events.md'; import Methods from '@ionic-internal/component-api/v8/segment-button/methods.md'; import Parts from '@ionic-internal/component-api/v8/segment-button/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/segment-button/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/segment-button/slots.md';

import EncapsulationPill from '@components/page/api/EncapsulationPill';

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.

import Basic from '@site/static/usage/v8/segment-button/basic/index.md';

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.

import Layout from '@site/static/usage/v8/segment-button/layout/index.md';

import CSSParts from '@site/static/usage/v8/segment-button/theming/css-shadow-parts/index.md';

import CSSProps from '@site/static/usage/v8/segment-button/theming/css-properties/index.md';