ionic-framework/core/src/components/segment-button

ion-segment-button

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

Properties

Property	Attribute	Description	Type
checked	checked	If true, the segment button is selected. Defaults to false.	boolean
color	color	The 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.	Color
disabled	disabled		boolean
mode	mode	The mode determines which platform styles to use. Possible values are: "ios" or "md".	Mode
value	value	The value of the segment button.	string

Events

Event	Description
ionSelect	Emitted when the segment button is clicked.

CSS Custom Properties

Name	Description
--background	Background of the button
--border-color	Color of the button border
--border-radius	Radius of the button border
--border-style	Style of the button border
--border-width	Width of the button border
--color	Color of the buton text
--icon-size	Size of the button icon
--margin-bottom	Bottom margin of the button
--margin-end	End margin of the button
--margin-start	Start margin of the button
--margin-top	Top margin of the button
--padding-bottom	Bottom padding of the button
--padding-end	End padding of the button
--padding-start	Start padding of the button
--padding-top	Top padding of the button
--transition	Transition of the button

---

Built with StencilJS