Feedback

import { Feedback } from "@uj-vilag/dap-components";

export default function FeedbackExample() {
  return (
    <div>
      <Feedback message="This is an error message." />
    </div>
  );
}

import { Feedback } from "@uj-vilag/dap-components";

export default function Variants() {
  return (
    <div className="flex flex-col gap-3">
      <Feedback variant="negative" message="This is an error message." />
      <Feedback variant="warning" message="This is a warning message." />
      <Feedback variant="positive" message="This is a success message." />
    </div>
  );
}

import { Feedback } from "@uj-vilag/dap-components";

export default function Subtle() {
  return (
    <div className="flex flex-col gap-3">
      <Feedback
        variant="negative"
        subtle
        message="This is a subtle error message."
      />
      <Feedback
        variant="warning"
        subtle
        message="This is a subtle warning message."
      />
      <Feedback
        variant="positive"
        subtle
        message="This is a subtle success message."
      />
    </div>
  );
}

import { Feedback } from "@uj-vilag/dap-components";

export default function Sizes() {
  return (
    <div className="flex flex-col gap-3">
      <Feedback
        variant="negative"
        size="small"
        message="This is a small error message."
      />
      <Feedback
        variant="negative"
        size="large"
        message="This is a large error message."
      />
    </div>
  );
}

import { Label, TextField, Feedback } from "@uj-vilag/dap-components";

export default function WithTextField() {
  return (
    <Label
      labelText="Email"
      required
      htmlFor="email-input"
      helperText="Please enter your email address."
    >
      <TextField
        placeholder="johndoe@example.com"
        status="error"
        id="email-input"
        aria-describedby="email-feedback email-input-helperText"
      />
      <Feedback
        message="Please enter a valid email address."
        id="email-feedback"
      />
    </Label>
  );
}