Developers
Start building
Themes/Theme SDK/Modules/ui/Parts: Button to Select

Parts: Button to Select

The parts of @poltura/theme-sdk/ui, Button to Select.

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

Button

A button in the store's primary, secondary, outline, ghost, link or destructive look.

Button(props: ButtonProps): ReactNode

Props: ButtonProps

Example

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

export function Subscribe() {
  return (
    <Button variant='outline' size='lg' type='submit'>
      Subscribe
    </Button>
  );
}

Badge

A small label for a status, count or tag.

Badge(props: BadgeProps): ReactNode

Props: BadgeProps

Example

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

export function NewTag() {
  return <Badge variant='secondary'>New</Badge>;
}

Card

A bordered surface that groups related content.

Card(props: CardProps): ReactNode

Props: CardProps

Example

import { Card, CardContent, CardHeader, CardTitle } from '@poltura/theme-sdk/ui';

export function Notice() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Free delivery</CardTitle>
      </CardHeader>
      <CardContent>On orders above 20,000 Ft.</CardContent>
    </Card>
  );
}

CardHeader

The top part of a Card, holding its title and description.

CardHeader(props: CardHeaderProps): ReactNode

Props: CardHeaderProps

Example

import { Card, CardDescription, CardHeader, CardTitle } from '@poltura/theme-sdk/ui';

export function Intro() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Care guide</CardTitle>
        <CardDescription>How to look after your order.</CardDescription>
      </CardHeader>
    </Card>
  );
}

CardTitle

The heading of a Card.

CardTitle(props: CardTitleProps): ReactNode

Props: CardTitleProps

Example

import { Card, CardHeader, CardTitle } from '@poltura/theme-sdk/ui';

export function Titled() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Returns</CardTitle>
      </CardHeader>
    </Card>
  );
}

CardDescription

The muted supporting line under a CardTitle.

CardDescription(props: CardDescriptionProps): ReactNode

Props: CardDescriptionProps

Example

import { Card, CardDescription, CardHeader } from '@poltura/theme-sdk/ui';

export function Described() {
  return (
    <Card>
      <CardHeader>
        <CardDescription>Ships within two working days.</CardDescription>
      </CardHeader>
    </Card>
  );
}

CardContent

The main body of a Card.

CardContent(props: CardContentProps): ReactNode

Props: CardContentProps

Example

import { Card, CardContent } from '@poltura/theme-sdk/ui';

export function Body() {
  return (
    <Card>
      <CardContent>Any content goes here.</CardContent>
    </Card>
  );
}

CardFooter

The bottom row of a Card, for actions.

CardFooter(props: CardFooterProps): ReactNode

Props: CardFooterProps

Example

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

export function Actions() {
  return (
    <Card>
      <CardFooter>
        <Button>Continue</Button>
      </CardFooter>
    </Card>
  );
}

Input

A single-line text field.

Input(props: InputProps): ReactNode

Props: InputProps

Example

import { Input, Label } from '@poltura/theme-sdk/ui';

export function EmailField() {
  return (
    <div>
      <Label htmlFor='email'>Email</Label>
      <Input id='email' type='email' name='email' autoComplete='email' />
    </div>
  );
}

Label

The visible name of a form field, tied to it with htmlFor.

Label(props: LabelProps): ReactNode

Props: LabelProps

Example

import { Input, Label } from '@poltura/theme-sdk/ui';

export function NameField() {
  return (
    <div>
      <Label htmlFor='name'>Name</Label>
      <Input id='name' name='name' />
    </div>
  );
}

Textarea

A multi-line text field.

Textarea(props: TextareaProps): ReactNode

Props: TextareaProps

Example

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

export function MessageField() {
  return <Textarea name='message' rows={5} placeholder='How can we help?' />;
}

Checkbox

A checkbox in the store's colours, tied to its Label with id and htmlFor.

Checkbox(props: CheckboxProps): ReactNode

Props: CheckboxProps

Example

import { useState } from 'react';
import { Checkbox, Label } from '@poltura/theme-sdk/ui';

export function GiftWrap() {
  const [wrapped, setWrapped] = useState(false);
  return (
    <div className='flex items-center gap-2'>
      <Checkbox id='gift-wrap' checked={wrapped} onCheckedChange={setWrapped} />
      <Label htmlFor='gift-wrap'>Gift wrap</Label>
    </div>
  );
}

Select

A dropdown that picks one value from a list; compose it with its trigger, value and items.

Select(props: SelectProps): ReactNode

Props: SelectProps

Example

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

export function SortPicker({ onChange }: { onChange: (value: string) => void }) {
  return (
    <Select defaultValue='newest' onValueChange={onChange}>
      <SelectTrigger>
        <SelectValue placeholder='Sort by' />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value='newest'>Newest</SelectItem>
        <SelectItem value='price'>Price</SelectItem>
      </SelectContent>
    </Select>
  );
}
Last updated