Developers
Start building
Themes/Theme SDK/Modules/ui/Parts: SelectTrigger to DialogDescription

Parts: SelectTrigger to DialogDescription

The parts of @poltura/theme-sdk/ui, SelectTrigger to DialogDescription.

On this page
import { … } from '@poltura/theme-sdk/ui';

SelectTrigger

The button of a Select that shows the chosen value and opens the list.

SelectTrigger(props: SelectTriggerProps): ReactNode

Props: SelectTriggerProps

Example

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

The chosen item's text, or a placeholder, inside a SelectTrigger.

SelectValue(props: SelectValueProps): ReactNode

Props: SelectValueProps

Example

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

The popover list of a Select, holding its items.

SelectContent(props: SelectContentProps): ReactNode

Props: SelectContentProps

Example

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

One choice inside a SelectContent.

SelectItem(props: SelectItemProps): ReactNode

Props: SelectItemProps

Example

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

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

Dialog(props: DialogProps): ReactNode

Props: DialogProps

Example

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

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

DialogContent(props: DialogContentProps): ReactNode

Props: DialogContentProps

Example

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

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

DialogHeader(props: DialogHeaderProps): ReactNode

Props: DialogHeaderProps

Example

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

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

DialogFooter(props: DialogFooterProps): ReactNode

Props: DialogFooterProps

Example

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

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

DialogTitle

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

DialogTitle(props: DialogTitleProps): ReactNode

Props: DialogTitleProps

Example

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

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

DialogDescription

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

DialogDescription(props: DialogDescriptionProps): ReactNode

Props: DialogDescriptionProps

Example

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

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