> ## Documentation Index > Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt > Use this file to discover all available pages before exploring further. # Button > An interactive button for triggering actions — available in multiple hierarchies, sizes, and states. ## Overview
The **Button** component is the primary interactive element in the A'raf Design System. It can render as a ` } ``` *** ## Variants Button has **7 visual hierarchies** reflecting the level of action emphasis. ### Primary Used for the primary and most important action on a page. Use sparingly — one per view at most.
```tsx theme={null} ``` * Primary form submission * Page-level CTA * Irreversible actions * More than one important action in the same area * Secondary or tertiary actions ### Secondary Two variants: `secondary` with a light blue background and `secondary-gray` with a gray border. Use alongside Primary for alternative actions.
```tsx theme={null} ``` ### Tertiary A borderless button that looks like plain text but retains an interactive hit area. Use for tertiary actions that don't need visual prominence.
```tsx theme={null} ``` ### Link Appears as a hyperlink. Available in two colors: `link-color` and `link-gray`.
```tsx theme={null} ``` Add the `href` prop to make this button render as an anchor tag for navigation. ### Destructive Red variant for dangerous or permanent actions. Available across all hierarchies.
```tsx theme={null} ``` Always add a confirmation dialog before triggering a destructive action. *** ## Sizes **5 sizes** are available to match different layout contexts.
| Size | Prop | Height | Use case | | ----------- | ----- | ------ | ------------------------------- | | Small | `sm` | 36px | Tables, dense toolbars | | Medium | `md` | 40px | Default — forms, cards, dialogs | | Large | `lg` | 44px | Hero sections, landing pages | | Extra Large | `xl` | 48px | Marketing pages | | 2X Large | `2xl` | 56px | Full-width CTAs, splash screens | ```tsx theme={null} ``` Keep sizes consistent within a single UI context. Do not mix `sm` and `xl` in the same toolbar. *** ## States
| State | Prop | Description | | -------- | ------------ | --------------------------------------------------- | | Default | — | Normal appearance | | Hover | — | Background becomes `#045CA0`, handled automatically | | Focused | — | Ring `4px #CDE4F5` for keyboard navigation | | Disabled | `isDisabled` | Opacity `0.4`, cursor `not-allowed` | | Loading | `isLoading` | Spinner scales to match button size and color | ```tsx theme={null} ``` Avoid hiding a button when it is unavailable. Use `isDisabled` so users can still see the action exists. *** ## Icons Button supports icons on the left, right, or in icon-only mode.
```tsx theme={null} import { Button } from "@araf-ds/core" import { PlusIcon, ArrowRightIcon } from "@araf-ds/core/icons" // Leading icon // Trailing icon // Icon only — aria-label required // External link ``` *** ## API Reference Visual hierarchy of the button. Values: `primary` · `secondary` · `secondary-gray` · `tertiary` · `tertiary-gray` · `link-color` · `link-gray` · `primary-destructive` · `secondary-destructive` · `tertiary-destructive` · `link-destructive` Button size. Values: `sm` · `md` · `lg` · `xl` · `2xl` Disables interaction and applies the disabled visual state. Shows a loading spinner and prevents interaction. When `true`, the children text remains visible during `isLoading`. Icon component rendered to the left of the label. Without `children`, the button becomes icon-only. Icon component rendered to the right of the label. When provided, the button renders as an `` anchor tag. Additional Tailwind classes for custom overrides. *** ## Accessibility * Uses a semantic `