# Parts: Button to Select (/themes/sdk/reference/ui/parts-1)

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

## `Button` [#button]

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

```ts
Button(props: ButtonProps): ReactNode
```

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

**Example**

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

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

## `Badge` [#badge]

A small label for a status, count or tag.

```ts
Badge(props: BadgeProps): ReactNode
```

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

**Example**

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

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

## `Card` [#card]

A bordered surface that groups related content.

```ts
Card(props: CardProps): ReactNode
```

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

**Example**

```tsx
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` [#cardheader]

The top part of a [`Card`](/themes/sdk/reference/ui/parts-1#card), holding its title and description.

```ts
CardHeader(props: CardHeaderProps): ReactNode
```

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

**Example**

```tsx
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` [#cardtitle]

The heading of a [`Card`](/themes/sdk/reference/ui/parts-1#card).

```ts
CardTitle(props: CardTitleProps): ReactNode
```

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

**Example**

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

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

## `CardDescription` [#carddescription]

The muted supporting line under a [`CardTitle`](/themes/sdk/reference/ui/parts-1#cardtitle).

```ts
CardDescription(props: CardDescriptionProps): ReactNode
```

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

**Example**

```tsx
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` [#cardcontent]

The main body of a [`Card`](/themes/sdk/reference/ui/parts-1#card).

```ts
CardContent(props: CardContentProps): ReactNode
```

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

**Example**

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

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

## `CardFooter` [#cardfooter]

The bottom row of a [`Card`](/themes/sdk/reference/ui/parts-1#card), for actions.

```ts
CardFooter(props: CardFooterProps): ReactNode
```

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

**Example**

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

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

## `Input` [#input]

A single-line text field.

```ts
Input(props: InputProps): ReactNode
```

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

**Example**

```tsx
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` [#label]

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

```ts
Label(props: LabelProps): ReactNode
```

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

**Example**

```tsx
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` [#textarea]

A multi-line text field.

```ts
Textarea(props: TextareaProps): ReactNode
```

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

**Example**

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

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

## `Checkbox` [#checkbox]

A checkbox in the store's colours, tied to its [`Label`](/themes/sdk/reference/ui/parts-1#label) with `id` and `htmlFor`.

```ts
Checkbox(props: CheckboxProps): ReactNode
```

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

**Example**

```tsx
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` [#select]

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

```ts
Select(props: SelectProps): ReactNode
```

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

**Example**

```tsx
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>
  );
}
```