# Components

Component catalog for **Nolab Design System**. Import all components from `@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501`.

### Avatar

```ts
import { Avatar } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `src` | string | `—` |
| `name` | string | `—` |
| `size` | number | `40` |
| `round` | boolean | `true` |

### Badge

```ts
import { Badge } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `variant` | status · label · chip | `status` |
| `tone` | listed · exclusive · luxury · presale · sale · neutral · rentas · fractional · blue · accent | `neutral` |
| `size` | sm · md · lg | `md` |
| `dot` | boolean | `false` |

### Button

```ts
import { Button } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `variant` | primary · ghost · paper-ghost · secondary · accent | `primary` |
| `size` | sm · md · lg | `md` |
| `fullWidth` | boolean | `false` |
| `disabled` | boolean | `false` |
| `iconLeft` | any | `—` |
| `iconRight` | any | `—` |

### Card

```ts
import { Card } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `padding` | string | `var(--space-6)` |
| `interactive` | boolean | `false` |

### DestinationCard

```ts
import { DestinationCard } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `image` | string | `—` |
| `label` | string | `—` |
| `href` | string | `—` |
| `align` | start · center | `start` |
| `labelSize` | md · sm | `md` |

### EditorialLabel

```ts
import { EditorialLabel } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `tone` | neutral · accent | `neutral` |

### Icon

```ts
import { Icon } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `name` | string | `—` |
| `size` | number | `18` |
| `strokeWidth` | number | `1.75` |

### IconButton

```ts
import { IconButton } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `variant` | solid · outline · ghost · floating · like | `outline` |
| `size` | sm · md · lg | `md` |
| `round` | boolean | `false` |
| `active` | boolean | `false` |
| `disabled` | boolean | `false` |

### Input

```ts
import { Input } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `label` | string | `—` |
| `iconLeft` | any | `—` |
| `hint` | string | `—` |
| `size` | sm · md · lg | `md` |
| `wrapStyle` | any | `—` |

### PropertyCard

```ts
import { PropertyCard } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `image` | string | `—` |
| `status` | any | `—` |
| `name` | string | `heart` |
| `location` | string | `—` |
| `beds` | number | `—` |
| `baths` | number | `—` |
| `area` | any | `—` |
| `price` | string | `—` |
| `currency` | string | `MXN` |
| `bedsLabel` | string | `Beds` |
| `bathsLabel` | string | `Baths` |
| `areaLabel` | string | `m\u00b2` |
| `saved` | boolean | `false` |
| `onToggleSave` | function | `—` |

### PropertyCardWide

```ts
import { PropertyCardWide } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `image` | string | `—` |
| `status` | any | `—` |
| `name` | string | `heart` |
| `location` | string | `—` |
| `beds` | number | `—` |
| `baths` | number | `—` |
| `area` | any | `—` |
| `price` | string | `—` |
| `currency` | string | `MXN` |
| `description` | string | `—` |
| `bedsLabel` | string | `Beds` |
| `bathsLabel` | string | `Baths` |
| `areaLabel` | string | `m\u00b2` |
| `saved` | boolean | `false` |
| `onToggleSave` | function | `—` |

### Select

```ts
import { Select } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `label` | string | `—` |
| `size` | sm · md · lg | `md` |
| `wrapStyle` | any | `—` |
| `children` | any | `—` |

### StatusPill

```ts
import { StatusPill } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `size` | sm · md · lg | `sm` |
| `dot` | boolean | `false` |
| `tone` | listed · exclusive · luxury · presale · sale · neutral | `neutral` |

### Tabs

```ts
import { Tabs } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `items` | any | `—` |
| `value` | string | `—` |
| `defaultValue` | string | `—` |
| `onChange` | function | `—` |

### Tag

```ts
import { Tag } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `selected` | boolean | `false` |
| `removable` | boolean | `false` |
| `onRemove` | function | `—` |

### VerticalChip

```ts
import { VerticalChip } from "@ws-workspace-01k2gbdb6xeqyt7sjvg20nrsd8/1b4b2708-5016-43a6-80cd-70eefa6fd501"
```

**Props:**

| Prop | Type | Default |
|---|---|---|
| `line` | fractional · rentas · venta · nolab | `fractional` |