Svonic Overview Introduction Getting Started Svonic Core Buttons and Inputs Button Checkbox Chip Date Picker Input Searchbar Radio Radio Group Range Ripple Effect Segment Segment Button Select Select Option Textarea Toggle Content and Layout App Col Content Grid Refresher Refresher Content Row Data Display Accordion Accordion Group Avatar Badge Card Card Content Card Header Card Subtitle Card Title Icon Ionicon Image Thumbnail Floating Action Fab Fab Button Fab List List and Item Item Item Divider Item Group Item Option Item Options Item Reorder Item Reorder Group Item Sliding Label List List Header Note Overlays Action Sheet Menu Menu Button Menu Toggle Modal Popover Toast Navigation Breadcrumb Breadcrumbs Split Pane Tab Tab Bar Tab Button Tabs Progress Indicators Progress Bar Skeleton Text Spinner Toolbar Buttons Footer Header Title Toolbar Typography Text
Segment Button iOS MD

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 setting the value of the segment to the value of the segment button. Only one segment button can be selected at a time.

Ionic References

Documentation
View Source Code
Segment buttons with text

Friends Enemies 
<script lang="ts">
	import { Label, Segment, SegmentButton } from '@svonic/core';
</script>

<Segment>
	<SegmentButton>
		<Label>Friends</Label>
	</SegmentButton>
	<SegmentButton>
		<Label>Enemies</Label>
	</SegmentButton>
</Segment>
Segment buttons with the first checked and the last disabled

Paid Free Top 
<script lang="ts">
	import { Label, Segment, SegmentButton } from '@svonic/core';
</script>

<Segment value="paid">
	<SegmentButton value="paid">
		<Label>Paid</Label>
	</SegmentButton>
	<SegmentButton value="free">
		<Label>Free</Label>
	</SegmentButton>
	<SegmentButton disabled="{true}" value="top">
		<Label>Top</Label>
	</SegmentButton>
</Segment>
Segment buttons with values and icons 

<script lang="ts">
	import { Ionicon, Segment, SegmentButton } from '@svonic/core';
	import { bookmark, camera } from 'ionicons/icons/index.js';
</script>

<Segment>
	<SegmentButton value="camera">
		<Ionicon icon="{camera}" />
	</SegmentButton>
	<SegmentButton value="bookmark">
		<Ionicon icon="{bookmark}" />
	</SegmentButton>
</Segment>
Segment with a value that checks the last button

Bookmarks Reading List Shared Links 
<script lang="ts">
	import { Label, Segment, SegmentButton } from '@svonic/core';
</script>

<Segment value="shared">
	<SegmentButton value="bookmarks">
		<Label>Bookmarks</Label>
	</SegmentButton>
	<SegmentButton value="reading">
		<Label>Reading List</Label>
	</SegmentButton>
	<SegmentButton value="shared">
		<Label>Shared Links</Label>
	</SegmentButton>
</Segment>
Label only

Item One Item Two Item Three 
<script lang="ts">
	import { Label, Segment, SegmentButton } from '@svonic/core';
</script>

<Segment value="1">
	<SegmentButton value="1">
		<Label>Item One</Label>
	</SegmentButton>
	<SegmentButton value="2">
		<Label>Item Two</Label>
	</SegmentButton>
	<SegmentButton value="3">
		<Label>Item Three</Label>
	</SegmentButton>
</Segment>
Segment buttons with icons in various positions

Icon only Icon top Item One Item Two Item Three Icon bottom Item One Item Two Item Three Icon start Item One Item Two Item Three Icon end Item One Item Two Item Three 
<script lang="ts">
	import { Ionicon, Label, List, ListHeader, Segment, SegmentButton } from '@svonic/core';
	import { call, heart, pin } from 'ionicons/icons/index.js';
</script>

<List>
	<ListHeader>Icon only</ListHeader>

	<Segment value="heart">
		<SegmentButton value="call">
			<Ionicon icon="{call}" />
		</SegmentButton>
		<SegmentButton value="heart">
			<Ionicon icon="{heart}" />
		</SegmentButton>
		<SegmentButton value="pin">
			<Ionicon icon="{pin}" />
		</SegmentButton>
	</Segment>

	<ListHeader>Icon top</ListHeader>

	<Segment value="2">
		<SegmentButton value="1">
			<Label>Item One</Label>
			<Ionicon icon="{call}" />
		</SegmentButton>
		<SegmentButton value="2">
			<Label>Item Two</Label>
			<Ionicon icon="{heart}" />
		</SegmentButton>
		<SegmentButton value="3">
			<Label>Item Three</Label>
			<Ionicon icon="{pin}" />
		</SegmentButton>
	</Segment>

	<ListHeader>Icon bottom</ListHeader>

	<Segment value="1">
		<SegmentButton value="1" layout="icon-bottom">
			<Ionicon icon="{call}" />
			<Label>Item One</Label>
		</SegmentButton>
		<SegmentButton value="2" layout="icon-bottom">
			<Ionicon icon="{heart}" />
			<Label>Item Two</Label>
		</SegmentButton>
		<SegmentButton value="3" layout="icon-bottom">
			<Ionicon icon="{pin}" />
			<Label>Item Three</Label>
		</SegmentButton>
	</Segment>

	<ListHeader>Icon start</ListHeader>

	<Segment value="1">
		<SegmentButton value="1" layout="icon-start">
			<Label>Item One</Label>
			<Ionicon icon="{call}" />
		</SegmentButton>
		<SegmentButton value="2" layout="icon-start">
			<Label>Item Two</Label>
			<Ionicon icon="{heart}" />
		</SegmentButton>
		<SegmentButton value="3" layout="icon-start">
			<Label>Item Three</Label>
			<Ionicon icon="{pin}" />
		</SegmentButton>
	</Segment>

	<ListHeader>Icon end</ListHeader>

	<Segment value="1">
		<SegmentButton value="1" layout="icon-end">
			<Ionicon icon="{call}" />
			<Label>Item One</Label>
		</SegmentButton>
		<SegmentButton value="2" disabled layout="icon-end">
			<Ionicon icon="{heart}" />
			<Label>Item Two</Label>
		</SegmentButton>
		<SegmentButton value="3" layout="icon-end">
			<Ionicon icon="{pin}" />
			<Label>Item Three</Label>
		</SegmentButton>
	</Segment>
</List>
Properties
Name
Type
Default Value
Description
disabled

false

true

false
If true, the user cannot interact with the component.
layout

icon-bottom

icon-end

icon-hide

icon-start

icon-top

label-hide

icon-top
Set the layout of the text and icon in the segment.
mode

ios

md

undefined

undefined
The mode determines which platform styles to use.
type

button

reset

submit

undefined
The type of the button.
value

null

number

string

undefined

The value of the input.
 dispatched Events
No dispatched events.
 forwarded Events
Name
Description
click
This event is dispatched when the component is clicked.
 Methods
No methods.
 Slots
No slots.

Svonic

Svonic is a Svelte component library built on top of the Ionic Framework.