# States

## Übersicht

Die Pflege von konsistenten digitalen Benutzeroberflächen über die gesamte AKDB erfordert weitreichende Richtlinien bzgl. der Verwendung von Zuständen. Die folgenden Konzepte dienen als Grundlage für einheitliche Komponenten. 

### Interaction States

#### Enabled

Wird verwendet, wenn kein anderer Zustand benötigt wird. Die Komponente kann vom Nutzer bedient werden und löst die mit ihr verknüpfte Aktion aus.

|||
|-|-|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/60_709.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=60:709)-->|<strong>Button</strong>|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/86_10627.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=86:10627)-->|<strong>Checkbox</strong>|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/47_3878.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=47:3878)-->|<strong>Text field</strong>|

#### Hover

Zustand visueller Hervorhebung wenn der Nutzer den Mauszeiger über die Komponenten bewegt.

|||
|-|-|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/60_719.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=60:719)-->|<strong>Button</strong>|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/86_10637.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=86:10637)-->|<strong>Checkbox</strong>|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/111_2884.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=111:2884)-->|<strong>Text field</strong>|

#### Active

Visuelle Hervorhebung wenn die Komponente active ist.

|||
|-|-|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/86_10639.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=86:10639)-->|<strong>Checkbox</strong>|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/60_733.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=60:733)-->|<strong>Button</strong>|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/1428_365.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=1428:365)-->|<strong>Text field</strong>|

#### Read Only

Eine Komponente kann für den Nutzer gesperrt sein. In diesem Fall dient diese lediglich als Anzeige von (System\-)Daten. In diesem Zustand kann die Komponente nie in den Zustand Enabled wechseln.

|||
|-|-|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/86_10629.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=86:10629)-->|<strong>Checkbox</strong>|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/47_3921.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=47:3921)-->|<strong>Text field</strong>|

#### Disabled

Ist eine Komponente disabled kann die mit ihr verbundene Aktion nicht ausgelöst werden. Im Laufe des Prozesses kann diese Enabled werden.

|||
|-|-|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/86_10641.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=86:10641)-->|<strong>Checkbox</strong>|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/60_747.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=60:747)-->|<strong>Button</strong>|
|![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/47_3892.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=47:3892)-->|<strong>Text field</strong>|

#### Hidden

Fehlen dem Nutzer Rechte, um bestimmte Aktionen durchzuführen, werden die damit verbundenen Komponenten nicht angezeigt.

#### Indeterminate

In bestimmten Fällen kann es vorkommen, dass der Zustand einer Komponente weder Enabled noch Active ist. Es ist so gesehen ein Zustand dazwischen.

### Feedback States

#### Default

Eine Default Komponente kann für neutrale Inhalte verwendet werden.

 ![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/262_13540.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=262:13540)--> 

 <strong>Default Callout</strong> 

#### Information

Wird verwendet, wenn dem Nutzer Informationen angezeigt werden.

 ![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/262_13544.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=262:13544)--> 

 <strong>Information Callout</strong> 

#### Success

Diese Komponente wird verwendet, wenn dem Nutzer positive Rückmeldungen angezeigt werden sollen.

 ![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/262_13546.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=262:13546)--> 

 <strong>Success Callout</strong> 

#### Warning

Verwendung für Warnanzeigen.

 ![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/262_13550.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=262:13550)--> 

 <strong>Warning Callout</strong> 

#### Error

Diese Komponente wird verwendet, wenn dem Nutzer negative Rückmeldungen angezeigt werden.

 ![](/images/versions/25-0/figma/VsozVyODV3kmHhjP6Y25L2/262_13548.png)<!--[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=262:13548)--> 

 <strong>Error Callout</strong> 

#### Denied

Wenn die Komponente einen leeren Zustand haben kann, sollte dieser verwendet werden.

|||
|-|-|