Deprecated
Link Content (Deprecated)
Use Action Button with variant="ghost" instead.
import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
import { LinkContent, SuffixIcon } from "@seed-design/react";
export default function LinkContentPreview() {
return (
<LinkContent>
새 글
<SuffixIcon svg={<IconChevronRightLine />} />
</LinkContent>
);
}
Usage
import { LinkContent, SuffixIcon } from "@seed-design/react";
import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
<LinkContent>
Label
<SuffixIcon svg={<IconChevronRightLine />} />
</LinkContent>
Props
Prop
Type
Examples
Size
import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
import { LinkContent, SuffixIcon, VStack } from "@seed-design/react";
export default function LinkContentSize() {
return (
<VStack>
<LinkContent size="t4">
추가
<SuffixIcon svg={<IconChevronRightLine />} />
</LinkContent>
<LinkContent size="t5">
추가
<SuffixIcon svg={<IconChevronRightLine />} />
</LinkContent>
<LinkContent size="t6">
추가
<SuffixIcon svg={<IconChevronRightLine />} />
</LinkContent>
</VStack>
);
}
Color
import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
import { LinkContent, VStack, SuffixIcon } from "@seed-design/react";
export default function LinkContentColor() {
return (
<VStack>
<LinkContent color="fg.neutral">
더보기
<SuffixIcon svg={<IconChevronRightLine />} />
</LinkContent>
<LinkContent color="fg.neutralSubtle">
더보기
<SuffixIcon svg={<IconChevronRightLine />} />
</LinkContent>
<LinkContent color="fg.brand">
더보기
<SuffixIcon svg={<IconChevronRightLine />} />
</LinkContent>
<LinkContent color="fg.informative">
더보기
<SuffixIcon svg={<IconChevronRightLine />} />
</LinkContent>
</VStack>
);
}
Last updated on