Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be displayed inside of a toolbar or the main content.

Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content.

<Segment bind:selectedSegmentId>
    <SegmentButton segmentId={firstSegmentId}>Default</SegmentButton>
    <SegmentButton segmentId={secondSegmentId}>Segment</SegmentButton>
    <SegmentButton segmentId={thirdSegmentId}>Other</SegmentButton>


To implement a segment both Segment and SegmentButton components are required.



Property Description Type Default
selectedSegmentId The selected segment. symbol
initIndicator A function that can be called on demand to reinitialize the indicator position and size. () => void


Property Description Type Default
segmentId The ID of the segment that will be use for selection purpose. symbol


Three entries

Two entries

Even more entries