### Install Dependencies

Source: https://github.com/digdir/designsystemet/blob/main/CONTRIBUTING.md

Run this command to install all necessary project dependencies.

```bash
pnpm i
```

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

### Complete Design System Configuration Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/cli-config.mdx

This JSON configuration defines a custom theme named 'my-theme' with specific color palettes, typography settings, and overrides for colors, severity, and link visited states. Ensure the $schema path is correct for your project setup.

```json
{
  "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",
  "outDir": "./design-tokens",
  "themes": {
    "my-theme": {
      "colors": { "main": { "primary": "#0062BA", "accent": "#1E98F5" }, "neutral": "#1E2B3C", "support": { "extra1": "#F45F63", "extra2": "#E5AA20" } },
      "borderRadius": 4,
      "typography": {
        "fontFamily": "Inter"
      },
      "overrides": {
        "colors": {
          "primary": {
            "background-default": {
              "light": "#ff0000",
              "dark": "#000fff"
            },
            "text-default": {
              "light": "#00ff00",
              "dark": "#00ffff"
            }
          }
        },
        "severity": {
          "success":  "#28a745",
          "warning": "#ffc107",
          "danger": "#dc3545",
          "info": "#17a2b8"
        },
        "linkVisited": {
          "light": "#ff1234",
          "dark": "#1234ff"
        }
      }
    }
  }
}
```

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

### Install Web Packages

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/setup.mdx

Install the core CSS and Web Components packages for HTML projects.

```sh
npm i @digdir/designsystemet-css @digdir/designsystemet-web 
```

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

### Install React Packages

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/setup.mdx

Install the core CSS and React component packages for React projects.

```sh
npm i @digdir/designsystemet-css @digdir/designsystemet-react
```

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

### List Writing Rule 1 Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/list/en/overview.mdx

Shows how to format list items when each item continues the introduction: lowercase start, no colon after intro, no full stop at item end.

```javascript
<Story story="Write1En" layout="column" />
```

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

### CLI Example for Creating Tokens

Source: https://github.com/digdir/designsystemet/blob/main/packages/cli/README.md

A command-line example demonstrating how to create design tokens with specific color and border-radius options, and assigning them to a theme. This is equivalent to a minimal config file.

```bash
npx @digdir/designsystemet tokens create \
--main-colors "primary:#0062BA" "accent:#1E98F5" \
--neutral-color "#1E2B3C" \
--support-colors "extra1:#F45F63" "extra2:#E5AA20" \
--border-radius 4 \
--theme "theme"
```

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

### Select with Options

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/select/en/overview.mdx

A basic example of the Select component displaying a list of options.

```javascript
import { PreviewEn } from "@/app/content/components/select/en/overview.mdx";

<PreviewEn />
```

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

### Skeleton Usage Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/skeleton/en/overview.mdx

Provides a practical example of how to implement the Skeleton component in a layout. This snippet shows the component in a column layout.

```javascript
<Story story="UsageExample" layout="column" />
```

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

### Ordered List Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/list/en/overview.mdx

Demonstrates the basic usage of an ordered list.

```javascript
<Story story="OrderedEn" layout="column" />
```

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

### Install Designsystemet React and CSS Packages

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/react.mdx

Install the necessary React components and CSS packages using npm. This is the first step to using the Designsystemet in your React project.

```sh
npm i @digdir/designsystemet-react @digdir/designsystemet-css
```

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

### Install Designsystemet V1 Release Candidate

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/blog/en/v1rc1.mdx

Use these commands to install the latest release candidate packages for React, theme, and CSS.

```shell
npm i @digdir/designsystemet-react@next
npm i @digdir/designsystemet-theme@next
npm i @digdir/designsystemet-css@next
```

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

### Web component button example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/blog/en/web-components-and-designsystemet-without-react.mdx

Demonstrates a custom web component element for a button.

```html
<ds-button data-variant="secondary">Click me</ds-button>
```

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

### Install Designsystemet CSS Package

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/other-frameworks.mdx

Install the CSS package using npm. This is the first step to using Designsystemet styles without React.

```sh
npm i @digdir/designsystemet-css
```

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

### List Writing Rule 2 Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/list/en/overview.mdx

Shows how to format list items when each item is a complete sentence: capital letter start, full stop at item end.

```javascript
<Story story="Write2En" layout="column" />
```

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

### Unordered List Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/list/en/overview.mdx

Demonstrates the basic usage of an unordered list.

```javascript
<Story story="UnorderedEn" layout="column" />
```

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

### Define a theme configuration

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/cli-config.mdx

Example of a full theme configuration including colors and border radius. The $schema property is recommended for validation.

```json
{
  "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",
  "themes": {
    "my-theme": {
      "colors": {
        "main": { "primary": "#0062BA" },
        "neutral": "#1E2B3C",
        "support": { "extra1": "#F45F63" }
      },
      "borderRadius": 4
    }
  }
}
```

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

### Start Local Development Servers

Source: https://github.com/digdir/designsystemet/blob/main/CONTRIBUTING.md

Choose and run the script for the specific application you want to work on locally: Storybook, Storefront (www), or Themebuilder.

```bash
pnpm storybook | www | themebuilder
```

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

### HTML Button Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/other-frameworks.mdx

A basic example of a Designsystemet button using pure HTML. Apply the `ds-button` class and specify variants using `data-variant` attributes.

```html
<button class="ds-button" data-variant="secondary">
Click me
</button>
```

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

### Conventional Commit Example: Docs

Source: https://github.com/digdir/designsystemet/blob/main/CONTRIBUTING.md

Example of a commit message for adding documentation to the Table component, including a scope.

```git
docs(Table): added paragraph about table header and using interderminate checkboxes
```

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

### Ordered List Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/list/en/code.mdx

Renders a standard ordered list using the 'ds-list' class.

```html
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>
```

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

### Install Designsystemet Types Package

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/setup.mdx

Install the type package for Designsystemet to enable type safety. This command should be run in your project's terminal.

```sh
npm i -D @digdir/designsystemet-types
```

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

### Basic Textfield Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/textfield/en/overview.mdx

Demonstrates a basic textfield with a label, help text, and validation message. Use when a complete form field is needed.

```javascript
import { Textfield } from "@digdir/designsystemet-react";

function MyForm() {
  return (
    <Textfield
      label="Navn"
      description="Fullt navn"
      error="Ugyldig navn"
    />
  );
}
```

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

### Unordered List Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/list/en/code.mdx

Renders a standard unordered list using the 'ds-list' class.

```html
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
```

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

### Do: Single Icon in Button

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/button/en/overview.mdx

Example showing the correct usage of a single icon within a button.

```html
<button class="button"> <i class="icon--check"></i> Submit </button>
```

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

### Combine data-color and data-color-scheme

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/colors.mdx

Examples showing how `data-color` and `data-color-scheme` can be used together. Note that `data-color` needs to be reapplied if the color scheme changes.

```html
<div data-color="neutral">
  <!-- Content here will have neutral color -->
</div>

<div data-color="neutral" data-color-scheme="dark">
  <!-- Content here will have neutral color and dark color mode -->
</div>

<div data-color="neutral">
  <div data-color-scheme="dark">
    <!-- Content here will not have neutral color -->
  </div>
</div>
```

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

### Link Card Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/card/en/overview.mdx

Demonstrates using a Card component as a navigation element to link to another page. Ensure correct usage for navigation.

```javascript
import { Card } from "@/components/card";

export default function Page() {
  return (
    <Card as="a" href="/path/to/destination">
      <Card.Title>Go to Destination</Card.Title>
      <Card.Description>Click here to navigate to the destination page.</Card.Description>
    </Card>
  );
}
```

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

### HTML Component Usage

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/setup.mdx

Example of using a button and a form field with Designsystemet classes and structure in HTML.

```html
<button class="ds-button" data-variant="secondary">Button</button>
<ds-field class="ds-field">
    <label>Label</label>
    <input class="ds-input">
</ds-field>
```

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

### Do: Use descriptive link text

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/link/en/overview.mdx

Example of a good link text that is self-explanatory and makes sense when read aloud.

```jsx
import { Link } from "@digdir/designsystemet-react";

<Link href="#">Log in to the service</Link>
```

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

### Card with Sections Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/card/en/code.mdx

Demonstrates how to use ds-card__block to divide a card into sections. Content must be placed within ds-card__block elements.

```html
<div class="ds-card">
  <div class="ds-card__block">
    <h2>Title</h2>
    <p>Content</p>
  </div>
  <div class="ds-card__block">
    <img src="/path/to/image.jpg" alt="Image description" />
  </div>
</div>
```

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

### Interactive Popover Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/popover/en/overview.mdx

Demonstrates a popover with interactive elements like buttons. Use this when the popover content needs user interaction.

```React
import { Preview } from "@storybook/react";
import { PreviewEn } from "./PreviewEn";

const meta = {
  title: "Components/Popover/PreviewEn",
  component: PreviewEn,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
};

export default meta;

type Story = StoryObj<typeof PreviewEn>;

export const InteractiveEn: Story = {
  args: {},
};

```

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

### Tag with Icon Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/tag/en/overview.mdx

Demonstrates how to use an icon within a Tag component for additional visual information. Ensure proper padding and margin for spacing.

```javascript
import { Tag, BodyLong } from '@digdir/design-system-react'

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <Tag icon={<CheckmarkIcon />}>Completed</Tag>
  <Tag icon={<CheckmarkIcon />}>Ongoing</Tag>
  <Tag icon={<CheckmarkIcon />}>Cancelled</Tag>
</div>
```

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

### React Component Usage

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/setup.mdx

Example of using a Button and a Field component from the Designsystemet React library.

```js
<Button data-variant="secondary">Button</Button>;
<Field>
  <Label>Label</Label>
  <Input />
</Field>
```

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

### Sortable Table Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/table/en/overview.mdx

Shows a table where columns can be sorted, indicated to the user that the data is sortable. This enhances data exploration.

```javascript
import { Table } from "@digdir/designsystemet-react";

function SortableTable() {
  return (
    <Table.Root>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell sortable>Navn</Table.HeaderCell>
          <Table.HeaderCell sortable align="right">Alder</Table.HeaderCell>
          <Table.HeaderCell>By</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Ola Nordmann</Table.Cell>
          <Table.Cell align="right">30</Table.Cell>
          <Table.Cell>Oslo</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Kari Hansen</Table.Cell>
          <Table.Cell align="right">25</Table.Cell>
          <Table.Cell>Bergen</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table.Root>
  );
}
```

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

### Design Systemet Config JSON with Theme

Source: https://github.com/digdir/designsystemet/blob/main/packages/cli/README.md

An example of a `designsystemet.config.json` file defining a theme with custom colors and border-radius. This configuration is equivalent to specific CLI options for creating tokens.

```json
{
  "$schema": "./node_modules/@digdir/designsystemet/dist/config.schema.json",
  "outDir": "../path/to/design-tokens",
  "themes": {
    "theme": {
      "colors": {
        "main": { "primary": "#0062BA", "accent": "#1E98F5" },
        "neutral": "#1E2B3C",
        "support": { "extra1": "#F45F63", "extra2": "#E5AA20" }
      },
      "borderRadius": 4
    }
  }
}
```

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

### Component Color Inheritance Examples

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/colors.mdx

Demonstrates how `Chip` and `Button` components inherit the 'neutral' color, while `Alert` does not due to its explicit color system.

```html
<div data-color="neutral">
  <Chip>
    This Chip has neutral color.
  </Chip>
</div>

<Button data-color="neutral">
  I have neutral color.
</Button>

<div data-color="neutral">
  <Alert>
    I don't have neutral color.
  </Alert>
</div>
```

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

### Horizontal Card Layout Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/card/en/code.mdx

Demonstrates how to arrange Card.Block elements horizontally using flexbox or grid. This is useful for side-by-side content.

```html
<div class="ds-card ds-card--grid">
  <div class="ds-card__block">Content 1</div>
  <div class="ds-card__block">Content 2</div>
</div>
```

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

### Skeleton Text Variant Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/skeleton/en/overview.mdx

Illustrates the specific usage of the text variant of the Skeleton component. This is useful for mimicking text-based content during loading.

```javascript
<Story story="Text" />
```

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

### HTML Details Component Usage

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/details/en/code.mdx

Demonstrates how to use the native HTML details element with Designsystemet CSS classes for styling. Includes examples with and without a card frame.

```html
<!-- without frame -->
<details class="ds-details">
  <summary>
  Details heading text
  </summary>
  <div>
  Details content
  </div>
</details>

<!-- with frame -->
<div class="ds-card">
  <details class="ds-details">
    <summary>
    Details heading text
    </summary>
    <div>
    Details content
    </div>
  </details>
</div>
```

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

### React Details Component Usage

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/details/en/code.mdx

Shows how to implement the Details component using the Designsystemet React library. Provides examples for both standalone usage and within a Card component.

```tsx
/* Without frame */
import { Details } from '@digdir/designsystemet-react';

<Details>
  <Details.Summary>Details heading text</Details.Summary>
  <Details.Content>Details content</Details.Content>
</Details>

/* With frame */

import { Details, Card } from '@digdir/designsystemet-react';

<Card>
  <Details>
    <Details.Summary>Details heading text</Details.Summary>
    <Details.Content>Details content</Details.Content>
  </Details>
</Card>
```

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

### Checkbox Group Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/checkbox/en/overview.mdx

Checkboxes are typically used in groups allowing multiple selections. This example shows a basic group setup.

```javascript
<div>
  <CheckboxGroup
    legend="Select your interests"
    options={[
      { label: 'Technology', value: 'tech' },
      { label: 'Art', value: 'art' },
      { label: 'Music', value: 'music' },
    ]}
  />
</div>
```

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

### Build Project

Source: https://github.com/digdir/designsystemet/blob/main/CONTRIBUTING.md

Execute this command to build the project.

```bash
pnpm build
```

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

### Conventional Commit Example: Fix

Source: https://github.com/digdir/designsystemet/blob/main/CONTRIBUTING.md

Example of a commit message fixing a bug in the Button component, including a scope.

```git
fix(Button): correct padding when only icon
```

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

### Multiple Themes Configuration

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/start-here/own-theme.mdx

This JSON configuration demonstrates how to define multiple themes, each with its own set of colors and design properties. Remember to run the create tokens command after updating this file.

```json
{
  "outDir": "./design-tokens",
  "clean": true,
  "themes": {
    "theme-one": {
      "colors": {
        "main": { "primary": "#0062BA" },
        "neutral": "#1E2B3C",
        "support": { "extra1": "#F45F63" }
      },
      "borderRadius": 4
    },
    "theme-two": {
      "colors": {
        "main": { "primary": "#0062BA" },
        "neutral": "#1E2B3C",
        "support": { "extra1": "#F45F63" }
      },
      "borderRadius": 4
    }
  }
}
```

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

### Create Tokens and Build CSS using Config

Source: https://github.com/digdir/designsystemet/blob/main/packages/cli/README.md

Commands to generate new design tokens and CSS files using a configuration file. These commands should be run after setting up the `designsystemet.config.json`.

```bash
npx @digdir/designsystemet tokens create
```

```bash
npx @digdir/designsystemet tokens build
```

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

### Avatar Stack React Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/avatar-stack/en/code.mdx

Example of creating an avatar stack using the Design System's React components. Customize avatar size and overlap via props.

```tsx
import { EXPERIMENTAL_AvatarStack as AvatarStack, Avatar } from '@digdir/designsystemet-react';

<AvatarStack aria-label="contributors" avatarSize="2rem" overlap={40}>
  <Avatar aria-label="Ola Nordmann">ON</Avatar>
  <Avatar aria-label="Ola Nordmann" data-initials="ON" />
  <Avatar aria-label="Ola Nordmann">
    <img src="..." />
  </Avatar>
</AvatarStack>
```

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

### Import Default Theme CSS

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/setup.mdx

Import the default Designsystemet theme CSS using JavaScript.

```js
import '@digdir/designsystemet-css';
import '@digdir/designsystemet-css/theme';
```

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

### Migrate from Beta Version

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/blog/en/v1rc1.mdx

Run this npx command to migrate from the beta version of Designsystemet to v1. It automatically runs on all `.css` files but can be scoped using the `--glob` parameter. Always double-check your code after the script runs.

```shell
npx @digdir/designsystemet migrate beta-to-v1
```

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

### Link Card Example (HTML)

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/card/en/code.mdx

Shows how to make an entire card function as a link by using an anchor tag as the outermost element. This ensures screen readers treat the entire card as a single link.

```html
<a
  class="ds-card"
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
>
  <div class="ds-card__block">
    <h2>Card Title</h2>
    <p>This is the card content.</p>
  </div>
</a>
```

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

### Field Component in React

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/field/en/code.mdx

Provides an example of using the Field component from the @digdir/designsystemet-react library.

```tsx
import { Field, Label, Input, ValidationMessage } from '@digdir/designsystemet-react';

<Field>
  <Label>Short description</Label>
  <Field.Description>Description</Field.Description>
  <Input />
  <ValidationMessage>Error message</ValidationMessage>
</Field>
```

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

### Basic Design Tokens Configuration

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/start-here/own-theme.mdx

This JSON configuration file defines the output directory, whether to clean previous builds, and the structure for themes, including colors and border-radius.

```json
{
  "outDir": "./design-tokens",
  "clean": true,
  "themes": {
    "theme": {
      "colors": {
        "main": { "primary": "#0062BA" },
        "neutral": "#1E2B3C",
        "support": { "extra1": "#F45F63" }
      },
      "borderRadius": 4
    }
  }
}
```

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

### Import the package

Source: https://github.com/digdir/designsystemet/blob/main/packages/web/README.md

Register all web components and observers globally by importing the package once.

```ts
import '@digdir/designsystemet-web';
```

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

### Radio Button Group Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/radio/en/overview.mdx

Demonstrates how to group radio buttons with a legend and description for clarity.

```javascript
import { Radio } from "@digdir/designsystemet-react";

function RadioGroupExample() {
  return (
    <Radio.Group name="example-group" legend="Velg et alternativ">
      <Radio value="1">Alternativ 1</Radio>
      <Radio value="2">Alternativ 2</Radio>
      <Radio value="3">Alternativ 3</Radio>
    </Radio.Group>
  );
}
```

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

### Do: Explain external links with text

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/link/en/overview.mdx

Demonstrates using text to clarify that a link leads to an external site or opens in a new tab.

```jsx
import { Link } from "@digdir/designsystemet-react";

<Link href="https://example.com" target="_blank">
  Visit our external website (opens in new tab)
</Link>
```

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

### React Textfield Component

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/textfield/en/code.mdx

Basic usage of the Textfield component in React. Ensure you have installed the '@digdir/designsystemet-react' package.

```tsx
import { Textfield } from '@digdir/designsystemet-react';

<Textfield label="Label" />
```

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

### Don't: Multiple Icons in Button

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/button/en/overview.mdx

Example demonstrating the incorrect usage of multiple icons in a single button.

```html
<button class="button"> <i class="icon--check"></i> Submit <i class="icon--arrow-right"></i> </button>
```

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

### Create Design Tokens

Source: https://github.com/digdir/designsystemet/blob/main/packages/cli/README.md

Use this command to create design tokens for themes, including custom colors and typography. It's recommended to use the theme builder for generating options. Run with `--clean` to remove deprecated or unneeded files.

```bash
npx @digdir/designsystemet tokens create <options>
```

```bash
npx @digdir/designsystemet tokens create <options> --clean
```

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

### Chip as Button

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/chip/en/code.mdx

Use this structure for a chip that acts as a button, for example, to clear filters. No special attributes are required.

```html
<button class="ds-chip" type="button">Clear all filters</button>
```

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

### Import Custom Theme CSS

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/fundamentals/en/code/setup.mdx

Import your custom theme CSS after the main Designsystemet CSS. Replace '<your-theme>.css' with your actual theme file name.

```css
@import '@digdir/designsystemet-css/index.css';
@import 'design-tokens-build/<your-theme>.css';
```

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

### Basic Link in React

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/link/en/code.mdx

Demonstrates how to import and use the Link component from the `@digdir/designsystemet-react` library to create a navigable link.

```tsx
import { Link } from '@digdir/designsystemet-react';

<Link href='https://designsystemet.no/'>Go to the design system</Link>;
```

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

### Chip Component in React

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/chip/en/code.mdx

Examples of using the Chip component from '@digdir/designsystemet-react' in various forms: radio, checkbox, removable, and button.

```tsx
import { Chip } from '@digdir/designsystemet-react';

// as radio
<Chip.Radio name="my-chip">Radio</Chip.Radio>;

// as checkbox
<Chip.Checkbox name="my-chip">Checkbox</Chip.Checkbox>;

// as removable
<Chip.Removable>Removable</Chip.Removable>;

// as button
<Chip.Button>Button</Chip.Button>;
```

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

### React Breadcrumbs Component

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/breadcrumbs/en/code.mdx

Example of using the React Breadcrumbs component with a label, a back link, and a list of navigation items.

```tsx
<Breadcrumbs aria-label="You are here:">
  <Breadcrumbs.Link aria-label="Back to level 3">Level 3</Breadcrumbs.Link>
  <Breadcrumbs.List>
    <Breadcrumbs.Item>
      <Breadcrumbs.Link href="https://designsystemet.no/">Level 1</Breadcrumbs.Link>
    </Breadcrumbs.Item>
    <Breadcrumbs.Item>
      <Breadcrumbs.Link href="https://designsystemet.no/niva-2/">Level 2</Breadcrumbs.Link>
    </Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs>
```

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

### Breadcrumb with Long Navigation Items

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/breadcrumbs/en/overview.mdx

Example demonstrating how long navigation item texts are handled within the breadcrumb component.

```javascript
import { Breadcrumbs } from "@digdir/designsystemet-react";

<Breadcrumbs>
  <Breadcrumbs.Item href="#">
    Forsiden
  </Breadcrumbs.Item>
  <Breadcrumbs.Item href="#">
    Arbeidsflate
  </Breadcrumbs.Item>
  <Breadcrumbs.Item href="#">
    Innboks
  </Breadcrumbs.Item>
  <Breadcrumbs.Item href="#">
    Meldinger
  </Breadcrumbs.Item>
  <Breadcrumbs.Item href="#">
    Detaljer om melding
  </Breadcrumbs.Item>
  <Breadcrumbs.Back href="#">
    Tilbake
  </Breadcrumbs.Back>
</Breadcrumbs>
```

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

### Card with Linked Elements Example (HTML)

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/card/en/code.mdx

Illustrates how to make a card clickable while retaining distinct interactive elements like links and buttons. Uses data-clickdelegatefor to manage click delegation.

```html
<div
  class="ds-card"
  data-clickdelegatefor="lenke"
>
  <a
    id="lenke"
    class="ds-link"
    href="https://designsystemet.no"
    target="_blank"
    rel="noopener noreferrer"
  >Myrkheim Museum</a>
  <button class="ds-button">Add to favorites</button>
</div>
```

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

### Required Textfield Example

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/textfield/en/overview.mdx

Shows how to mark a textfield as required, which is legally mandated for mandatory fields. Ensure clear visual indication.

```javascript
import { Textfield } from "@digdir/designsystemet-react";

function MyForm() {
  return (
    <Textfield
      label="Fornavn"
      required
      description="Ditt fornavn"
    />
  );
}
```

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

### Disabled Select

Source: https://github.com/digdir/designsystemet/blob/main/apps/www/app/content/components/select/en/overview.mdx

An example of a disabled Select component. It is generally advised to avoid disabled states due to potential user confusion.

```javascript
import { DisabledEn } from "@/app/content/components/select/en/overview.mdx";

<DisabledEn />
```