# Usage

> Imports, compound components, composition with render, and styling with className.

Source: /docs/usage

## Imports

Everything comes from the package root.

```tsx
import { Button, Checkbox, Dialog, Select } from '@aksornproject/aksara-ui'
```

## Compound components

Components such as Dialog and Select have several parts. Put them inside their `Root` and choose the parts your screen needs. `Root` manages shared state, `Trigger` opens the popup, and the remaining parts define its content.

```tsx
<Dialog.Root>
  <Dialog.Trigger render={<Button>Open</Button>} />
  <Dialog.Popup size="md">
    <Dialog.Header title="Title" />
    <Dialog.Body>Body</Dialog.Body>
  </Dialog.Popup>
</Dialog.Root>
```

## Composition with `render`

Parts that accept `render` let you choose the rendered element while keeping their behaviour and styles. For example, render a Button as a link for navigation rather than attaching a click handler.

```tsx
<Button nativeButton={false} render={<a href="/reports" />}>
  Reports
</Button>
```

## Styling with `className`

Pass `className` to adjust layout or override styling. Conflicting token utilities you pass take precedence over the component's defaults. Check the component page for which element receives the classes.

```tsx
<Button className="w-full">Full width</Button>
```

Use token utilities, such as `p-spacing-16` or `bg-color-accent`, rather than raw values. The [design tokens](/docs/foundations/colors) pages list them.

## State and events

Use `defaultValue` or `defaultChecked` for a starting value the component manages itself. To manage the value in your app, pass `value` or `checked` together with the corresponding change handler. Each component page shows its supported props and event signatures.

## Accessibility

Use visible labels for form controls. Give icon-only buttons an `aria-label`, and name dialogs with their title. Components handle keyboard interaction, but your app still needs meaningful labels, clear error messages and a logical focus order. Read each component's accessibility guidance before adding it to a screen.