Link Content
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
새 글
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 | Default |
|---|---|---|
color? | ScopedColorFg | ScopedColorPalette | (string & {}) | - |
asChild? | boolean | false |
size? | "t6" | "t5" | "t4" | t4 |
weight? | "bold" | "regular" | regular |
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