---
title: "Settings links"
description: "A settings landing: groups of cards, each a link to one settings page with its icon, what it is for and how it stands today. On a phone each group is one compact list."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Settings links

## Settings landing

An amber status says a page needs attention.

```tsx
import { BuildingsIcon, EnvelopeSimpleIcon, ListChecksIcon, StethoscopeIcon, UsersThreeIcon } from '@phosphor-icons/react';
import { SettingsLink, SettingsLinkGroup } from '@arbol-ai/ui';

<div className="space-y-6">
  <SettingsLinkGroup title="Your organization">
    <SettingsLink
      description="The institution’s name and the functions it uses."
      href="#/settings-links"
      icon={<BuildingsIcon />}
      status="Clínica Norte · 5 functions"
      title="Institution"
    />
    <SettingsLink
      description="Who answers and where: hours, rooms and appointments at a time."
      href="#/settings-links"
      icon={<UsersThreeIcon />}
      status="4 agendas · 1 without hours"
      statusTone="warning"
      title="Professionals and rooms"
    />
    <SettingsLink
      description="Consultations and procedures: length, color and who attends them."
      href="#/settings-links"
      icon={<StethoscopeIcon />}
      status="12 active services"
      title="Services"
    />
  </SettingsLinkGroup>
  <SettingsLinkGroup title="Appointments and patients">
    <SettingsLink
      description="What is asked at each booking: document, phone and your own fields."
      href="#/settings-links"
      icon={<ListChecksIcon />}
      title="Booking details"
    />
    <SettingsLink
      description="What your team and your patients receive by email, WhatsApp or a call."
      href="#/settings-links"
      icon={<EnvelopeSimpleIcon />}
      title="Notifications"
    />
  </SettingsLinkGroup>
</div>
```

## A lone link

A group without a title holds a link to another settings page.

```tsx
import { PlugsConnectedIcon } from '@phosphor-icons/react';
import { SettingsLink, SettingsLinkGroup } from '@arbol-ai/ui';

<SettingsLinkGroup>
  <SettingsLink
    description="WhatsApp and calls with Arbol, and email."
    href="#/settings-links"
    icon={<PlugsConnectedIcon />}
    title="Integrations"
  />
</SettingsLinkGroup>
```

## Source

The examples above are [`src/blocks/settings-links/settings-links.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/settings-links/settings-links.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/settings-links/index.mdx