# UI: native

> @pithyx/ui/native: the class names of the components for native HTML elements, without React Aria.

Source: https://pithyx.org/docs/reference/sdk/ui/native/
Markdown: https://pithyx.org/docs/reference/sdk/ui/native.md

@pithyx/ui/native: the class names of the components for native HTML elements, without React Aria. Import the token file once (`@pithyx/ui/tokens.css`) and wrap the app in `UiProvider`; see [@pithyx/ui](https://pithyx.org/docs/sdk/ui/).

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

## Variables

### buttonStyles

```ts
const buttonStyles: object = button;
```

The class names of `Button`: `button`, one per variant, `small` and `spinner` for a pending state.

#### Type Declaration

##### button

```ts
readonly button: string;
```

##### danger

```ts
readonly danger: string;
```

##### icon

```ts
readonly icon: string;
```

##### primary

```ts
readonly primary: string;
```

##### quiet

```ts
readonly quiet: string;
```

##### secondary

```ts
readonly secondary: string;
```

##### small

```ts
readonly small: string;
```

##### spinner

```ts
readonly spinner: string;
```

---

### controlStyles

```ts
const controlStyles: object = controls;
```

The class names of `Checkbox`, `Switch`, `ProgressBar` and `Badge`; a checkbox is `checkbox` with a `box`.

#### Type Declaration

##### accent

```ts
readonly accent: string;
```

##### badge

```ts
readonly badge: string;
```

##### bar

```ts
readonly bar: string;
```

##### box

```ts
readonly box: string;
```

##### checkbox

```ts
readonly checkbox: string;
```

##### danger

```ts
readonly danger: string;
```

##### field

```ts
readonly field: string;
```

##### fill

```ts
readonly fill: string;
```

##### highlight

```ts
readonly highlight: string;
```

##### neutral

```ts
readonly neutral: string;
```

##### progress

```ts
readonly progress: string;
```

##### progressLabel

```ts
readonly progressLabel: string;
```

##### progressValue

```ts
readonly progressValue: string;
```

##### switch

```ts
readonly switch: string;
```

##### thumb

```ts
readonly thumb: string;
```

##### track

```ts
readonly track: string;
```

---

### textFieldStyles

```ts
const textFieldStyles: object = textField;
```

The class names of `TextField`, `PasswordField`, `OtpField` and `SearchField`.

#### Type Declaration

##### clear

```ts
readonly clear: string;
```

##### description

```ts
readonly description: string;
```

##### error

```ts
readonly error: string;
```

##### field

```ts
readonly field: string;
```

##### frame

```ts
readonly frame: string;
```

##### input

```ts
readonly input: string;
```

##### label

```ts
readonly label: string;
```

##### otp

```ts
readonly otp: string;
```

##### reveal

```ts
readonly reveal: string;
```

##### search

```ts
readonly search: string;
```

##### searchIcon

```ts
readonly searchIcon: string;
```

##### searchInput

```ts
readonly searchInput: string;
```

## References

### cx

Re-exports [cx](https://pithyx.org/docs/reference/sdk/ui/helpers/#cx)

---

### uiTexts

Re-exports [uiTexts](https://pithyx.org/docs/reference/sdk/ui/helpers/#uitexts-1)

---

### UiTexts

Re-exports [UiTexts](https://pithyx.org/docs/reference/sdk/ui/helpers/#uitexts)