Flow

Components

Badge

Der Badge wird üblicherweise dafür genutzt Gruppen von zusammengehörigen Metadaten anzuzeigen.GitHub
Value

Beispiel

Value
import Badge from "@mittwald/flow-react-components/Badge";

<Badge>Value</Badge>

Mit Scope

ScopeValue
import Badge from "@mittwald/flow-react-components/Badge";
import Label from "@mittwald/flow-react-components/Label";
import Text from "@mittwald/flow-react-components/Text";

<Badge color="neutral">
  <Label>Scope</Label>
  <Text>Value</Text>
</Badge>

Mit onPress

import Badge from "@mittwald/flow-react-components/Badge";

<Badge
  onPress={() => {
    alert("pressed!");
  }}
>
  Value
</Badge>

Mit onClose

Value
import Badge from "@mittwald/flow-react-components/Badge";

<Badge
  onClose={() => {
    alert("closed!");
  }}
>
  Value
</Badge>

Farben

ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
import Badge from "@mittwald/flow-react-components/Badge";
import Label from "@mittwald/flow-react-components/Label";
import Text from "@mittwald/flow-react-components/Text";

<Row>
  <Badge color="neutral">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="blue">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="navy">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="violet">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="teal">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="lilac">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="green">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="orange">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="red">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
</Row>

Dark

ScopeValue
import Badge from "@mittwald/flow-react-components/Badge";
import Label from "@mittwald/flow-react-components/Label";
import Text from "@mittwald/flow-react-components/Text";

<Badge color="dark">
  <Label>Scope</Label>
  <Text>Value</Text>
</Badge>

Light

ScopeValue
import Badge from "@mittwald/flow-react-components/Badge";
import Label from "@mittwald/flow-react-components/Label";
import Text from "@mittwald/flow-react-components/Text";

<Badge color="light">
  <Label>Scope</Label>
  <Text>Value</Text>
</Badge>

Disabled

ScopeValue
import Badge from "@mittwald/flow-react-components/Badge";
import Label from "@mittwald/flow-react-components/Label";
import Text from "@mittwald/flow-react-components/Text";

<Badge color="neutral" isDisabled>
  <Label>Scope</Label>
  <Text>Value</Text>
</Badge>
Feedback geben