LinkButton

This component provides an element resembling an anchor that purely acts as a click target with no navigation as result. It can also be used inline in text.

Import

copy
import { LinkButton } from '@trendmicro/react-styled-ui';
import { LinkButton } from '@trendmicro/react-styled-ui';

Usage

EDITABLE EXAMPLE
copy
function Example() {
  const [timeLeft, setTimeLeft] = React.useState(180);
  React.useEffect(() => {
    const timer = setTimeout(() => {
      if (timeLeft > 0) {
        setTimeLeft(timeLeft - 1);
      }
    }, 1000);

    return () => {
      clearTimeout(timer);
    };
  }, [timeLeft]);
  const handleClick = () => {
    setTimeLeft(180);
  };

  return (
    <Text>
      If the email does not arrive in your inbox or spam folder, <LinkButton onClick={handleClick}>click here to resend ({timeLeft}s)</LinkButton>.
    </Text>
  );
}
function Example() {
  const [timeLeft, setTimeLeft] = React.useState(180);
  React.useEffect(() => {
    const timer = setTimeout(() => {
      if (timeLeft > 0) {
        setTimeLeft(timeLeft - 1);
      }
    }, 1000);

    return () => {
      clearTimeout(timer);
    };
  }, [timeLeft]);
  const handleClick = () => {
    setTimeLeft(180);
  };

  return (
    <Text>
      If the email does not arrive in your inbox or spam folder, <LinkButton onClick={handleClick}>click here to resend ({timeLeft}s)</LinkButton>.
    </Text>
  );
}

Props