### Basic TextLink Example

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/text-link.mdx

Renders a TextLink component that navigates to an external URL. Use this for linking to external websites.

```tsx
<TextLink href="https://google.com" external>
  Go to Google
</TextLink>
```

--------------------------------

### Basic Tooltip Example

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/tooltip.mdx

Displays a tooltip with custom content when hovering over a button. Ensure the content is contextual and non-critical.

```tsx
<Tooltip content="This is a tooltip">
  <Button>Hover me for Tooltip</Button>
</Tooltip>
```

--------------------------------

### Checkbox Usage Example

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/checkbox.mdx

Demonstrates the basic import and usage of the Checkbox component. Ensure to provide appropriate values for `value`, `label`, `description`, and `onChange` props.

```jsx
import { Forms } from '@grafana/ui';

<Checkbox value={true|false} label={...} description={...} onChange={...} />
```

--------------------------------

### Basic RadioButtonGroup Usage

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/radio-button-group.mdx

Demonstrates the basic setup of a RadioButtonGroup with options and state management for the selected value.

```tsx
function Basic() {
  const [value, setValue] = useState<string>();
  return (
    <RadioButtonGroup
      options={[
        { label: 'Prometheus', value: 'prometheus' },
        { label: 'Graphite', value: 'graphite', icon: 'cloud' },
        { label: 'Elastic', value: 'elastic' },
      ]}
      value={value}
      onChange={setValue}
    />
  );
}
```

--------------------------------

### Basic InteractiveTable Usage

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/interactive-table.mdx

This example demonstrates the basic usage of the InteractiveTable component with predefined data and columns. Ensure the InteractiveTable component and its dependencies are imported before use.

```tsx
const data = [
  { size: 'Small', width: '24px', fontSize: '12px' },
  { size: 'Medium', width: '32px', fontSize: '14px' },
  { size: 'Large', width: '48px', fontSize: '18px' },
];
const columns = [
  { id: 'size', header: 'Size' },
  { id: 'width', header: 'Width' },
  { id: 'fontSize', header: 'Font Size' },
];
render(<InteractiveTable columns={columns} data={data} />);
```

--------------------------------

### Basic Stack Usage

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/03-primitives/stack.mdx

Demonstrates the basic usage of the Stack component with direction, wrap, alignment, justification, and gap properties. This example shows how to arrange three span elements within a responsive container.

```tsx
<Stack direction='row' wrap='wrap' alignItems='center' justifyContent='center' gap={5}>
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
</Stack>
```

--------------------------------

### Basic FilterPill Usage

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/filter-pill.mdx

Demonstrates how to import and use the FilterPill component with a label and an onClick handler. Ensure you have '@grafana/ui' installed.

```jsx
import { FilterPill } from '@grafana/ui';

<FilterPill label={'Test'} onClick={() => console.log('toggle')} />;
```

--------------------------------

### Add Datasource Form Example

Source: https://context7.com/grafana/design-system/llms.txt

A React component demonstrating a form for adding a new data source, utilizing Grafana UI components and react-hook-form for state management and validation. Ensure `@grafana/ui` and `react-hook-form` are installed.

```tsx
import { Field, Input, Select, Switch, Button, Stack, Box, Text } from '@grafana/ui';
import { useForm } from 'react-hook-form';

type DatasourceForm = {
  name: string;
  url: string;
  type: string;
  default: boolean;
};

const AddDatasourceForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<DatasourceForm>();

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      {/* Form header */}
      <Box marginBottom={4}>
        <Text element="h2">Add datasource</Text>
        <Text color="secondary">Connect Grafana to an external data source.</Text>
      </Box>

      {/* Form body – single-column, 16px gap between fields */}
      <Stack direction="column" gap={2}>
        <Field label="Name" required invalid={!!errors.name} error="Name is required">
          <Input id="name" placeholder="My Prometheus" {...register('name', { required: true })} />
        </Field>

        <Field label="URL" description="The HTTP URL of your datasource" required>
          <Input id="url" placeholder="http://localhost:9090" {...register('url')} />
        </Field>

        <Field label="Type">
          <Select
            inputId="type"
            options={[
              { label: 'Prometheus', value: 'prometheus' },
              { label: 'Loki',       value: 'loki' },
            ]}
            onChange={() => {}}
          />
        </Field>

        <Field label="Default datasource" description="Use this datasource in new panels by default">
          <Switch id="default" {...register('default')} />
        </Field>
      </Stack>

      {/* Action bar – primary button left-aligned */}
      <Box marginTop={5} display="flex" gap={2}>
        <Button type="submit" variant="primary">Save &amp; test</Button>
        <Button type="button" variant="secondary">Discard</Button>
      </Box>
    </form>
  );
};

```

--------------------------------

### Modal Dialog Example in React

Source: https://context7.com/grafana/design-system/llms.txt

Use Modal for focus-capturing dialogs that overlay critical or task-blocking content. This example shows a confirmation dialog with options to cancel or proceed with deletion, supporting close on backdrop click and Escape key.

```tsx
import { Modal, Button } from '@grafana/ui';
import React, { useState } from 'react';

// Confirmation dialog
const DeleteModal = ({ onConfirm }: { onConfirm: () => void }) => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button variant="destructive" onClick={() => setIsOpen(true)}>
        Delete dashboard
      </Button>
      <Modal
        title="Delete dashboard"
        isOpen={isOpen}
        onDismiss={() => setIsOpen(false)}
        closeOnBackdropClick
        closeOnEscape
      >
        <p>This action cannot be undone. Are you sure you want to delete <strong>My Dashboard</strong>?</p>
        <Modal.ButtonRow>
          <Button variant="secondary" onClick={() => setIsOpen(false)}>Cancel</Button>
          <Button variant="destructive" onClick={() => { onConfirm(); setIsOpen(false); }}>Delete</Button>
        </Modal.ButtonRow>
      </Modal>
    </>
  );
};

```

--------------------------------

### Changing RadioButtonList Layout with CSS

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/radio-button.mdx

Illustrates how to customize the layout of the RadioButtonList using CSS Grid. This example splits the list into three columns.

```jsx
import { RadioButtonList } from '@grafana/ui';

<RadioButtonGroup
  options={...}
  value={...}
  onChange={...}
  className={css`
    grid-template-columns: 1fr 1fr 1fr;
  `}
/>
```

--------------------------------

### GeneralInfo Step Component Source

Source: https://github.com/grafana/design-system/blob/main/docs/07-templates/multistep-form-page.mdx

A specific step component for gathering general information. It likely contains form fields related to the initial setup or basic details.

```tsx
import { CodeCollapse } from '@site/src/components/templates/CodeCollapse';
import GeneralInfoRaw from '!!raw-loader!@site/src/components/templates/MultistepFormPage/Steps/GeneralInfo';

<CodeCollapse label="GeneralInfo.tsx">{GeneralInfoRaw}</CodeCollapse>
```

--------------------------------

### Tooltip Examples in React

Source: https://context7.com/grafana/design-system/llms.txt

Use Tooltip to display non-critical supplemental information on hover or keyboard focus. Content must be concise and should not contain interactive elements. The error variant is useful for inline validation.

```tsx
import { Tooltip, Button, IconButton } from '@grafana/ui';

// Wrapping a button
<Tooltip content="Save your current dashboard changes">
  <Button variant="primary">Save</Button>
</Tooltip>

// Tooltip on an icon button (prefer the built-in `tooltip` prop instead)
<Tooltip content="Refresh data">
  <IconButton name="sync" aria-label="Refresh" />
</Tooltip>

// Error variant for inline validation
<Tooltip content="This field is required" placement="right" theme="error">
  <Input invalid />
</Tooltip>

// Controlled placement
<Tooltip content="Opens in a new browser tab" placement="bottom-start">
  <TextLink href="https://grafana.com" external>Grafana</TextLink>
</Tooltip>
```

--------------------------------

### Empty State without Button

Source: https://github.com/grafana/design-system/blob/main/docs/06-patterns/empty-state.mdx

Omit the button prop when there isn't a single, direct action to create an item. Instead, provide descriptive text to guide the user on how to create the resource.

```tsx
import { EmptyState, TextLink } from '@grafana/ui';

<EmptyState variant="call-to-action" message="You haven't created any library panels yet">
  Create a library panel from any existing dashboard panel through the panel context menu.{' '}
  <TextLink external href="<externalDocsLink>">
    Learn more.
  </TextLink>
</EmptyState>;
```

--------------------------------

### Inline Alert Example

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/alert.mdx

Use Inline Alerts to provide direct, contextual feedback to users within the main content area. They are suitable for both system and user-triggered events.

```tsx
import { Alert } from "@grafana/ui";

<Alert title="Inline alert">
  <div>Child content that includes some alert details, like maybe what actually happened.</div>
</Alert>
```

--------------------------------

### Badge Examples in React

Source: https://context7.com/grafana/design-system/llms.txt

Badges add meta information like status or counts to adjacent content. They support named colors and optional icons. Note that colors use the visualization palette, not semantic design tokens.

```tsx
import { Badge, Stack } from '@grafana/ui';

// Status badges
<Stack direction="row" gap={1}>
  <Badge color="green"  text="Ready"       />
  <Badge color="orange" text="In progress" />
  <Badge color="red"    text="Deprecated"  />
  <Badge color="blue"   text="Beta"        />
  <Badge color="purple" text="Experimental"/>
</Stack>

// Badge with icon and tooltip
<Badge
  icon="rocket"
  color="blue"
  text="New in v11"
  tooltip="Introduced in Grafana 11 – subject to change"
/>
```

--------------------------------

### Basic Pagination Usage

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/pagination.mdx

Demonstrates how to integrate the Pagination component into your application. Ensure you provide the current page number, the total number of pages, and a navigation handler.

```jsx
<div>
  <div>Page 1 content</div>
  <Pagination currentPage={1} numberOfPages={5} onNavigate={() => fetchPage(2)} />
</div>
```

--------------------------------

### Steps Configuration

Source: https://github.com/grafana/design-system/blob/main/docs/07-templates/multistep-form-page.mdx

Configuration file that likely defines the order, titles, and potentially the components associated with each step in the multistep form.

```ts
import { CodeCollapse } from '@site/src/components/templates/CodeCollapse';
import stepsRaw from '!!raw-loader!@site/src/components/templates/MultistepFormPage/utils/steps';

<CodeCollapse label="steps.ts">{stepsRaw}</CodeCollapse>
```

--------------------------------

### Basic RadioButtonList Usage

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/radio-button.mdx

Demonstrates the basic import and usage of the RadioButtonList component. Ensure you provide options, a value, and an onChange handler.

```jsx
import { RadioButtonList } from '@grafana/ui';

<RadioButtonGroup options={...} value={...} onChange={...} />
```

--------------------------------

### Toast Alert Example

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/alert.mdx

Toast Alerts are temporary messages that appear in the top-right corner of the screen. They are dismissible and disappear after a few seconds, ideal for non-disruptive notifications.

```tsx
import { Alert } from "@grafana/ui";

<Alert title="Toast" elevated>
  <div>Child content that includes some alert details, like maybe what actually happened.</div>
</Alert>
```

--------------------------------

### Empty State with Call to Action Button

Source: https://github.com/grafana/design-system/blob/main/docs/06-patterns/empty-state.mdx

Use this variant when no data exists and you want to prompt the user to create an item or complete initial configuration. It includes a message and a button for the primary action.

```tsx
import { EmptyState, LinkButton, TextLink } from '@grafana/ui';

<EmptyState
  variant="call-to-action"
  message="You haven't created any playlists yet"
  button={
    <LinkButton icon="plus" href="playlists/new" size="lg">
      Create playlist
    </LinkButton>
  }
>
  You can use playlists to cycle dashboards on TVs without user control.{' '}
  <TextLink external href="<externalDocsLink>">
    Learn more.
  </TextLink>
</EmptyState>;
```

--------------------------------

### Input with Addon After

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/input.mdx

An accessory, commonly a button, can be placed after the input using the `addonAfter` prop.

```tsx
<Input addonAfter={<Button variant="secondary">Load</Button>} />
```

--------------------------------

### Basic FileDropzone Usage

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/file-dropzone.mdx

Import and use the FileDropzone component. The onLoad callback receives the file result.

```jsx
import { FileDropzone } from '@grafana/ui';

<FileDropzone onLoad={(result) => console.log(result)} />;
```

--------------------------------

### Box Component Layout and Styling

Source: https://context7.com/grafana/design-system/llms.txt

Demonstrates the Box component for layout primitives, including spacing, visual styling, flex properties, and responsive design using breakpoint-specific props.

```tsx
import { Box } from '@grafana/ui';

// Spacing using ThemeSpacingTokens (0 | 0.25 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10)
<Box margin={2} padding={3} borderStyle="solid" borderColor="strong">
  Content with margin and padding
</Box>

// Visual styling
<Box
  borderRadius="pill"
  borderStyle="dashed"
  borderColor="strong"
  backgroundColor="warning"
  boxShadow="z2"
>
  Warning callout
</Box>

// Flex layout via Box
<Box display="flex" alignItems="center" justifyContent="space-between" gap={3}>
  <span>Label</span>
  <Button variant="secondary">Action</Button>
</Box>

// Responsive props – different values per breakpoint
<Box margin={{ xs: 1, md: 3, lg: 5 }} padding={{ xs: 1, md: 2 }}>
  Responsive spacing
</Box>
```

--------------------------------

### Toggletip Examples in React

Source: https://context7.com/grafana/design-system/llms.txt

Toggletip is similar to Tooltip but is triggered by click and remains visible until dismissed. It supports interactive content, optional titles, and footer slots. Use it for persistent popovers with actionable elements.

```tsx
import { Toggletip, Button } from '@grafana/ui';

// Basic toggletip with header, body, and footer
<Toggletip
  title="Retention policy"
  content="Data older than the retention period will be automatically deleted. This cannot be undone."
  footer={<TextLink href="/docs/retention" external>Learn more</TextLink>}
>
  <Button variant="secondary" icon="info-circle">Retention info</Button>
</Toggletip>

// Toggletip with an interactive call-to-action inside
<Toggletip
  title="Quick actions"
  content={
    <Stack direction="column" gap={1}>
      <Button variant="secondary" fullWidth>Duplicate panel</Button>
      <Button variant="secondary" fullWidth>Copy link</Button>
    </Stack>
  }
>
  <IconButton name="ellipsis-v" tooltip="More options" />
</Toggletip>
```

--------------------------------

### Responsive Grid Columns

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/03-primitives/grid.mdx

Define responsive behavior for the `columns` prop by passing an object with breakpoint keys (e.g., `xs`, `md`). This allows the number of columns to adapt to different screen sizes.

```tsx
import { Grid } from '@grafana/ui';

<Grid columns={{ xs: 1, md: 4 }} gap={2}>
  <span>Content</span>
</Grid>
```

--------------------------------

### Truncated Span with Parent Container Styling

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/text.mdx

This example shows how to truncate a Text component rendered as a span by applying CSS properties to its parent div. A Tooltip is used to display the full text on hover.

```jsx
<Tooltip content="This is an example of a span element truncated by its parent container">
  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
    <Text color="primary" variant="body">
      {'This is an example of a span element truncated by its parent container.'}
    </Text>
  </div>
</Tooltip>
```

--------------------------------

### Button Hierarchy and Pairings

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/02-buttons/button.mdx

Illustrates how to use different button types (Primary/Destructive, Secondary/Icon, Outline/Text) to convey varying levels of importance and user attention. Use primary buttons for the main action, secondary for less critical actions, and outline/text for informational links.

```markdown
- **Primary/Destructive Button — High Emphasis:**

  A single page should only display one button with the highest importance for the main action. Other buttons should have lower emphasis and be visually different within the UI. This primary button has to attract the user's attention.

- **Secondary/Icon Button — Default Emphasis:**

  A single screen can show more than one button, the other buttons can be in the same page with a primary button, these buttons have to be less important according to the actions, and do not distract users from the main content page. You should only group calls to action that are related to each other. A higher emphasis button can be paired with multiple buttons which are lower emphasis.

- **Outline/Text Button — Low Emphasis:**

  These buttons have less impact and are less distracting to the user's attention, on the same screen several of them can be used. They are actionable to take users to a new page, the main objective being to provide more information about that section.
```

--------------------------------

### Responsive Box Component Props

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/03-primitives/box.mdx

Demonstrates how to apply responsive values to Box component props using an object with breakpoint keys (e.g., xs, md). This allows for different styling based on screen size.

```tsx
margin={{ xs: 3, md: 5 }}
```

--------------------------------

### Async Select Input

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/select.mdx

Configure for dropdowns populated asynchronously. Provide a `loadOptions` function returning a promise and optionally `defaultOptions` for initial loading. `cacheOptions` can improve performance.

```tsx
const loadAsyncOptions = (inputValue: string) => {
  return new Promise<Array<SelectableValue<string>>>((resolve) => {
    setTimeout(() => {
      resolve([
        { label: 'Option 1', value: '1' },
        { label: 'Option 2', value: '2' },
        { label: 'Option 3', value: '3' },
      ]);
    }, 1000);
  });
};

const BasicSelectAsync = () => {
  const [value, setValue] = React.useState<SelectableValue<string>>();

  return (
    <Container>
      <AsyncSelect loadOptions={loadAsyncOptions} defaultOptions value={value} onChange={setValue} />
    </Container>
  );
};

render(<BasicSelectAsync />);
```

--------------------------------

### Card Action with Metadata Interaction Note

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/card.mdx

When using both Card actions (href/onClick) and Card.Meta, clicking elements within Card.Meta will not trigger the card's primary action. This example demonstrates that clicking the Description triggers the alert, while clicking the Meta text does not.

```jsx
<Card onClick={() => alert('Hello, Grafana!')}>
  <Card.Heading>Hello, Grafana</Card.Heading>
  <Card.Meta>Clicking on this text (Meta) WILL NOT trigger the alert!</Card.Meta>
  <Card.Description>Clicking on this text (Description) WILL trigger the alert!</Card.Description>
</Card>
```

--------------------------------

### Basic Button Usage

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/02-buttons/button.mdx

Demonstrates the basic usage of the Button component. This is suitable for primary actions.

```tsx
<Button>Save</Button>
```

--------------------------------

### Responsive Grid Minimum Column Width

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/03-primitives/grid.mdx

Define responsive behavior for the `minColumnWidth` prop by passing an object with breakpoint keys. This allows the minimum column width to adapt to different screen sizes.

```tsx
import { Grid } from '@grafana/ui';

<Grid minColumnWidth={{ xs: 8, lg: 13 }} gap={2}>
  <span>Content</span>
</Grid>
```

--------------------------------

### Run Docusaurus Locally

Source: https://github.com/grafana/design-system/blob/main/README.md

To run the Docusaurus instance locally, execute this command in your terminal. A local instance will be available at 'http://localhost:3000/developers/saga/'.

```bash
yarn start
```

--------------------------------

### Preview Step Component Source

Source: https://github.com/grafana/design-system/blob/main/docs/07-templates/multistep-form-page.mdx

The Preview step component allows users to review their selections or entered information before final submission.

```tsx
import { CodeCollapse } from '@site/src/components/templates/CodeCollapse';
import PreviewRaw from '!!raw-loader!@site/src/components/templates/MultistepFormPage/Steps/Preview';

<CodeCollapse label="Preview.tsx">{PreviewRaw}</CodeCollapse>
```

--------------------------------

### Basic IconButton Usage

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/02-buttons/iconButton.mdx

Use this snippet to render a basic IconButton with a tooltip and an icon. Ensure the tooltip provides a clear label for the action.

```tsx
<IconButton tooltip="Add new" name="plus" />
```

--------------------------------

### Basic Switch Usage

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/switch.mdx

Demonstrates the basic usage of the Switch component with a label and disabled state.

```jsx
<Switch invalid={false} label="Toggle feature" disabled={false} />
```

--------------------------------

### Basic Toggletip with Header and Footer

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/toggletip.mdx

Demonstrates a basic Toggletip with a title, content, and footer, triggered by a button click. Ensure the trigger element is focusable and has an accessible label.

```tsx
<Toggletip
  title={'Title of the Toggletip'}
  content={'This is the content of the Toggletip'}
  footer={'Footer of the Toggletip'}
>
  <Button>Click to show Toggletip with header and footer!</Button>
</Toggletip>
```

--------------------------------

### Button Component Usage

Source: https://context7.com/grafana/design-system/llms.txt

Demonstrates various emphasis levels, sizes, and icon usage for the Button component. Use only one primary button per page.

```tsx
import { Button } from '@grafana/ui';

// Primary action (high emphasis)
<Button variant="primary" size="md">Save dashboard</Button>

// Secondary (default emphasis) – most common usage
<Button variant="secondary" size="md">Cancel</Button>

// Destructive – paired with a confirmation modal
<Button variant="destructive" size="md">Delete</Button>

// Icon + label button
<Button variant="secondary" icon="plus">Add panel</Button>

// Button group – only one primary allowed
<>
  <Button variant="primary">Save</Button>
  <Button variant="secondary">Discard</Button>
</>
```

--------------------------------

### Inline Switch Usage

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/switch.mdx

Shows how to use the InlineSwitch component for a more compact toggle.

```jsx
<InlineSwitch />
```

--------------------------------

### Box Component for Flex Layout

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/03-primitives/box.mdx

Shows how to use the Box component to create a flex layout with alignment and spacing. For simpler flex needs without other styling, consider using the Stack component.

```tsx
<Box display='flex' alignItems='center' justifyContent='center' gap={5}>
  <span>One</span>
  <span>Two</span>
</Box>
```

--------------------------------

### Badge with Icon

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/badge.mdx

Add an icon to the beginning of the badge by specifying the 'icon' prop with a valid icon name.

```jsx
<Badge icon="rocket" color="blue" text="New!" />
```

--------------------------------

### Select with Virtualized Option List

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/select.mdx

Use for Select components with a large number of options to improve performance by enabling a virtualized list. Props like `maxVisibleValues`, `showAllSelectedWhenOpen`, `isClearable`, and `isLoading` are also applicable.

```tsx
const Basic = () => {
  const [value, setValue] = React.useState<SelectableValue<string>>();
  const options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];

  return (
    <Container>
      <Select
        options={options}
        value={value}
        onChange={(v) => {
          setValue(v);
        }}
        virtualized
      />
    </Container>
  );
};

render(<Basic />);
```

--------------------------------

### Box Component with Visual Style Props

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/03-primitives/box.mdx

Illustrates how to style the Box component using border, background, and shadow properties. These props accept values from the Grafana design tokens for consistent visual appearance.

```tsx
<Box borderRadius='pill' borderStyle='dashed' borderColor='strong' backgroundColor='warning' boxShadow='z1'>
  Content
</Box>
```

--------------------------------

### Select with Custom Value Creation

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/select.mdx

Enable users to create new options by setting `allowCustomValue` to true. The `onCreateOption` prop handles the logic for adding new values and updating the state.

```tsx
const CustomValueCreation = () => {
  const [value, setValue] = React.useState<SelectableValue<string>>();
  const [customOptions, setCustomOptions] = React.useState<Array<SelectableValue<string>>>([]);
  const options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];
  return (
    <Container>
      <Select
        options={[...options, ...customOptions]}
        value={value}
        onChange={(v) => {
          setValue(v);
        }}
        allowCustomValue
        onCreateOption={(v) => {
          const customValue: SelectableValue<string> = { value: v, label: v };
          setCustomOptions([...customOptions, customValue]);
          setValue(customValue);
        }}
      />
    </Container>
  );
};

render(<CustomValueCreation />);
```

--------------------------------

### Card with Primary and Secondary Actions

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/card.mdx

Use Card.Actions for primary buttons and Card.SecondaryActions for icon buttons. Ensure actions are wrapped within their respective components.

```jsx
<Card>
  <Card.Heading>1-ops-tools1-fallback</Card.Heading>
  <Card.Meta>
    Grafana
    <a key="prom-link" href="https://ops-us-east4.grafana.net/api/prom">
      https://ops-us-east4.grafana.net/api/prom
    </a>
  </Card.Meta>
  <Card.Figure>
    <img src={logo} alt="Grafana Logo" width="40" height="40" />
  </Card.Figure>
  <Card.Actions>
    <Button key="settings" variant="secondary">
      Settings
    </Button>
    <Button key="explore" variant="secondary">
      Explore
    </Button>
  </Card.Actions>
  <Card.SecondaryActions>
    <IconButton key="showAll" name="apps" tooltip="Show all dashboards for this data source" />
    <IconButton key="delete" name="trash-alt" tooltip="Delete this data source" />
  </Card.SecondaryActions>
</Card>
```

--------------------------------

### Badge with Tooltip

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/badge.mdx

Provide additional information on hover by using the 'tooltip' prop. Keep the tooltip content concise.

```jsx
<Badge icon="rocket" color="blue" text="New!" tooltip="Check out this new feature!" />
```

--------------------------------

### Box Component with Spacing Props

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/03-primitives/box.mdx

Demonstrates the usage of margin and padding props on the Box component. Use these props to add space around or inside the box, leveraging theme spacing tokens.

```tsx
<Box margin={1} marginY={2} marginTop={3} padding={1} paddingY={2} paddingTop={3} borderStyle='solid' borderColor='strong'>
  Content
</Box>
```

--------------------------------

### Grid with Minimum Column Width

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/03-primitives/grid.mdx

Use the `minColumnWidth` prop to let the grid determine the number of columns based on available space, ensuring each column meets a minimum width. The `gap` prop controls spacing.

```tsx
import { Grid } from '@grafana/ui';

<Grid minColumnWidth={13} gap={2}>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
</Grid>
```

--------------------------------

### Select and AsyncSelect Components

Source: https://context7.com/grafana/design-system/llms.txt

Use Select for single or multi-value selections with predefined options. AsyncSelect is suitable for dynamic data loading with debounced search. Ensure options are formatted as SelectableValue. For multi-select, maxVisibleValues limits displayed chips.

```tsx
import { Select, AsyncSelect } from '@grafana/ui';
import { SelectableValue } from '@grafana/data';
import React, { useState } from 'react';

// Basic controlled select
const BasicSelect = () => {
  const [value, setValue] = useState<SelectableValue<string>>();
  const options = [
    { label: 'Prometheus', value: 'prometheus' },
    { label: 'Loki',       value: 'loki' },
    { label: 'Tempo',      value: 'tempo' },
  ];
  return (
    <Select
      options={options}
      value={value}
      onChange={setValue}
      placeholder="Select datasource"
    />
  );
};

// Multi-select with a maximum of 3 visible chips
<Select
  options={options}
  value={selectedValues}
  onChange={setSelectedValues}
  isMulti
  maxVisibleValues={3}
/>

// Async select with debounced search
const loadOptions = (query: string) =>
  fetch(`/api/search?q=${query}`)
    .then(r => r.json())
    .then(items => items.map(i => ({ label: i.name, value: i.id })));

<AsyncSelect
  loadOptions={loadOptions}
  defaultOptions
  value={value}
  onChange={setValue}
  placeholder="Search dashboards…"
/>

// Allow user-created values
<Select
  options={options}
  value={value}
  onChange={setValue}
  allowCustomValue
  onCreateOption={(v) => {
    const custom: SelectableValue<string> = { label: v, value: v };
    setOptions(prev => [...prev, custom]);
    setValue(custom);
  }}
/>
```

--------------------------------

### Render a FormPage Component

Source: https://github.com/grafana/design-system/blob/main/docs/07-templates/form-page.mdx

Demonstrates how to use the FormPage component within a Page wrapper. This is typically used for pages that collect user data via a form.

```tsx
import { Page } from '@site/src/components/templates/Page/Page';
import FormPage from '@site/src/components/templates/FormPage/FormPage';

// ... other imports

<Page title={'Feature name'} subTitle={'Further description of the feature and links to docs.'} height={700}>
  <FormPage />
</Page>
```

--------------------------------

### Card with Multiple Metadata Elements

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/card.mdx

Use Card.Meta to provide metadata. For multiple strings, wrap them in an array or escape each string with brackets. This is useful for displaying supplementary information like tags or counts.

```jsx
<Card>
  <Card.Heading>Test dashboard</Card.Heading>
  <Card.Meta>{['Folder: Test', 'Views: 100']}</Card.Meta>
</Card>
```

--------------------------------

### Basic Field Usage

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/field.mdx

Use this snippet to create a basic labeled input field with a description. Ensure the child component (e.g., Input) is properly imported.

```tsx
<Field label="API key" description="Your instance API key">
  <Input id="api-key" />
</Field>
```

--------------------------------

### Form Input with Label

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/input.mdx

Use inputs with the Field component to provide labels and descriptions. This is the standard way to use inputs in forms.

```tsx
<Field label="Username">
  <Input placeholder="Enter username" />
</Field>
```

--------------------------------

### Import ListPage Component Source

Source: https://github.com/grafana/design-system/blob/main/docs/07-templates/list-page.mdx

Import the raw source code of the ListPage component for reference or analysis.

```jsx
import ListPageRaw from '!!raw-loader!@site/src/components/templates/ListPage/ListPage';
```

--------------------------------

### Card as a Link

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/card.mdx

Configure the Card to act as a clickable link by providing an 'href' prop. This is suitable for redirecting users to external or internal resources.

```jsx
<Card href="https://grafana.com">
  <Card.Heading>Redirect to Grafana</Card.Heading>
  <Card.Description>Clicking this card will redirect to grafana website</Card.Description>
</Card>
```

--------------------------------

### Card with HTML Metadata

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/card.mdx

Metadata can include HTML elements like links. For non-string elements, a 'key' prop must be manually specified to ensure proper rendering and identification.

```jsx
<Card>
  <Card.Heading>Test dashboard</Card.Heading>
  <Card.Meta>
    Grafana
    <a key="prom-link" href="https://ops-us-east4.grafana.net/api/prom">
      https://ops-us-east4.grafana.net/api/prom
    </a>
  </Card.Meta>
</Card>
```

--------------------------------

### AdditionalInfo Step Component Source

Source: https://github.com/grafana/design-system/blob/main/docs/07-templates/multistep-form-page.mdx

A specific step component for collecting additional information. This might include advanced settings or supplementary details.

```tsx
import { CodeCollapse } from '@site/src/components/templates/CodeCollapse';
import AdditionalInfoRaw from '!!raw-loader!@site/src/components/templates/MultistepFormPage/Steps/AdditionalInfo';

<CodeCollapse label="AdditionalInfo.tsx">{AdditionalInfoRaw}</CodeCollapse>
```

--------------------------------

### Render Multistep Form Page

Source: https://github.com/grafana/design-system/blob/main/docs/07-templates/multistep-form-page.mdx

This snippet shows how to render the MultistepFormPage component within a DataProvider context. Ensure the Page component is set up with appropriate title and subtitle.

```tsx
import { Page } from '@site/src/components/templates/Page/Page';
import { DataProvider } from '@site/src/components/templates/MultistepFormPage/DataProvider';
import MultistepFormPage from '@site/src/components/templates/MultistepFormPage/MultistepFormPage';

<Page title="Feature name" subTitle="Further description of the feature and links to docs." height={700}>
  <DataProvider>
    <MultistepFormPage />
  </DataProvider>
</Page>
```

--------------------------------

### Grid with Fixed Columns

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/03-primitives/grid.mdx

Use the `columns` prop to define a fixed number of equally sized columns. The `gap` prop controls the spacing between grid items.

```tsx
import { Grid } from '@grafana/ui';

<Grid columns={4} gap={2}>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
</Grid>
```

--------------------------------

### Input with Prefix Icon

Source: https://github.com/grafana/design-system/blob/main/docs/05-components/input.mdx

Add a prefix element, such as an icon, to the beginning of the input. Useful for search fields.

```tsx
<Input prefix={<Icon name="search" />} placeholder="Search dashboards" />
```