Segmented control (UI SDK): Icons

An item holding only an icon turns square. Name it with aria-label.

import {
  IconAlignCenter,
  IconAlignJustified,
  IconAlignLeft,
  IconAlignRight,
} from "@tabler/icons-react"

import {
  SegmentedControl,
  SegmentedControlItem,
} from "@/components/ui/ui-sdk-segmented-control"

function UiSdkSegmentedControlIcons() {
  return (
    <SegmentedControl aria-label="Text alignment" defaultValue="left">
      <SegmentedControlItem value="left" aria-label="Align left">
        <IconAlignLeft aria-hidden="true" />
      </SegmentedControlItem>
      <SegmentedControlItem value="center" aria-label="Align center">
        <IconAlignCenter aria-hidden="true" />
      </SegmentedControlItem>
      <SegmentedControlItem value="right" aria-label="Align right">
        <IconAlignRight aria-hidden="true" />
      </SegmentedControlItem>
      <SegmentedControlItem value="justify" aria-label="Justify">
        <IconAlignJustified aria-hidden="true" />
      </SegmentedControlItem>
    </SegmentedControl>
  )
}

export { UiSdkSegmentedControlIcons }

Add this example

This adds the example as components/examples/ui-sdk-segmented-control/icons.tsx, together with the Segmented control component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-segmented-control-icons.json

To add only the component, follow the Segmented control installation.

Props in this example

The Segmented control props this example sets, from the API reference.

SegmentedControl

Prop	Type	Default
`defaultValue`	`T \| null`	`–`

SegmentedControlItem

Prop	Type	Default
`value`	`string`	`–`

Every prop is in the Segmented control API reference.

More Segmented control examples

See them all, with keyboard support and accessibility notes, on the Segmented control page.