# Parts: SelectTrigger to DialogDescription (/themes/sdk/reference/ui/parts-2)

```ts
import { … } from '@poltura/theme-sdk/ui';
```

## `SelectTrigger` [#selecttrigger]

The button of a [`Select`](/themes/sdk/reference/ui/parts-1#select) that shows the chosen value and opens the list.

```ts
SelectTrigger(props: SelectTriggerProps): ReactNode
```

**Props:** [`SelectTriggerProps`](/themes/sdk/reference/ui/types-1#selecttriggerprops)

**Example**

```tsx
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@poltura/theme-sdk/ui';

export function SizePicker() {
  return (
    <Select>
      <SelectTrigger className='w-40'>
        <SelectValue placeholder='Size' />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value='s'>Small</SelectItem>
      </SelectContent>
    </Select>
  );
}
```

## `SelectValue` [#selectvalue]

The chosen item's text, or a placeholder, inside a [`SelectTrigger`](/themes/sdk/reference/ui/parts-2#selecttrigger).

```ts
SelectValue(props: SelectValueProps): ReactNode
```

**Props:** [`SelectValueProps`](/themes/sdk/reference/ui/types-1#selectvalueprops)

**Example**

```tsx
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@poltura/theme-sdk/ui';

export function ColorPicker() {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue placeholder='Pick a colour' />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value='red'>Red</SelectItem>
      </SelectContent>
    </Select>
  );
}
```

## `SelectContent` [#selectcontent]

The popover list of a [`Select`](/themes/sdk/reference/ui/parts-1#select), holding its items.

```ts
SelectContent(props: SelectContentProps): ReactNode
```

**Props:** [`SelectContentProps`](/themes/sdk/reference/ui/types-1#selectcontentprops)

**Example**

```tsx
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@poltura/theme-sdk/ui';

export function CountryPicker() {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue placeholder='Country' />
      </SelectTrigger>
      <SelectContent align='start'>
        <SelectItem value='hu'>Hungary</SelectItem>
      </SelectContent>
    </Select>
  );
}
```

## `SelectItem` [#selectitem]

One choice inside a [`SelectContent`](/themes/sdk/reference/ui/parts-2#selectcontent).

```ts
SelectItem(props: SelectItemProps): ReactNode
```

**Props:** [`SelectItemProps`](/themes/sdk/reference/ui/types-1#selectitemprops)

**Example**

```tsx
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@poltura/theme-sdk/ui';

export function QuantityPicker() {
  return (
    <Select defaultValue='1'>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value='1'>1</SelectItem>
        <SelectItem value='2'>2</SelectItem>
      </SelectContent>
    </Select>
  );
}
```

## `Dialog` [#dialog]

A modal dialog: focus stays inside while it is open, and Escape or a click outside closes it.

```ts
Dialog(props: DialogProps): ReactNode
```

**Props:** [`DialogProps`](/themes/sdk/reference/ui/types-1#dialogprops)

**Example**

```tsx
import { useState } from 'react';
import { Button, Dialog, DialogContent, DialogTitle } from '@poltura/theme-sdk/ui';

export function SizeGuide() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant='outline' onClick={() => setOpen(true)}>
        Size guide
      </Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogTitle>Size guide</DialogTitle>
        </DialogContent>
      </Dialog>
    </>
  );
}
```

## `DialogContent` [#dialogcontent]

The dialog's panel, centred over a dimmed page.

```ts
DialogContent(props: DialogContentProps): ReactNode
```

**Props:** [`DialogContentProps`](/themes/sdk/reference/ui/types-1#dialogcontentprops)

**Example**

```tsx
import { Dialog, DialogContent, DialogTitle } from '@poltura/theme-sdk/ui';

export function Notice({ open, onClose }: { open: boolean; onClose: () => void }) {
  return (
    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
      <DialogContent className='sm:max-w-md'>
        <DialogTitle>Shipping is paused over the holidays</DialogTitle>
      </DialogContent>
    </Dialog>
  );
}
```

## `DialogHeader` [#dialogheader]

The top of a dialog, holding its title and description.

```ts
DialogHeader(props: DialogHeaderProps): ReactNode
```

**Props:** [`DialogHeaderProps`](/themes/sdk/reference/ui/types-1#dialogheaderprops)

**Example**

```tsx
import { DialogDescription, DialogHeader, DialogTitle } from '@poltura/theme-sdk/ui';

export function ReturnsHeader() {
  return (
    <DialogHeader>
      <DialogTitle>Returns</DialogTitle>
      <DialogDescription>Send it back within 30 days.</DialogDescription>
    </DialogHeader>
  );
}
```

## `DialogFooter` [#dialogfooter]

The bottom of a dialog, holding its buttons; they stack on phones.

```ts
DialogFooter(props: DialogFooterProps): ReactNode
```

**Props:** [`DialogFooterProps`](/themes/sdk/reference/ui/types-1#dialogfooterprops)

**Example**

```tsx
import { Button, DialogFooter } from '@poltura/theme-sdk/ui';

export function ConfirmButtons({ onConfirm }: { onConfirm: () => void }) {
  return (
    <DialogFooter>
      <Button onClick={onConfirm}>Confirm</Button>
    </DialogFooter>
  );
}
```

## `DialogTitle` [#dialogtitle]

The dialog's title; screen readers announce it when the dialog opens.

```ts
DialogTitle(props: DialogTitleProps): ReactNode
```

**Props:** [`DialogTitleProps`](/themes/sdk/reference/ui/types-1#dialogtitleprops)

**Example**

```tsx
import { DialogTitle } from '@poltura/theme-sdk/ui';

export function GuideTitle() {
  return <DialogTitle>Size guide</DialogTitle>;
}
```

## `DialogDescription` [#dialogdescription]

The line under a dialog's title; screen readers read it with the title.

```ts
DialogDescription(props: DialogDescriptionProps): ReactNode
```

**Props:** [`DialogDescriptionProps`](/themes/sdk/reference/ui/types-1#dialogdescriptionprops)

**Example**

```tsx
import { DialogDescription } from '@poltura/theme-sdk/ui';

export function GuideNote() {
  return <DialogDescription>Measure around the widest part.</DialogDescription>;
}
```