React
Extended FAB (Deprecated)
더 이상 사용되지 않습니다. Contextual Floating Button을 사용하세요.
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
export default function ExtendedFabPreview() {
return (
<ExtendedFab>
<PrefixIcon svg={<IconBellFill />} />
알림 설정
</ExtendedFab>
);
}Usage
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";<ExtendedFab>
<PrefixIcon svg={<IconPlusLine />} />
라벨
</ExtendedFab>Props
Prop
Type
Examples
Medium
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
export default function ExtendedFabMedium() {
return (
<ExtendedFab size="medium">
<PrefixIcon svg={<IconBellFill />} />
알림 설정
</ExtendedFab>
);
}Small
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
export default function ExtendedFabSmall() {
return (
<ExtendedFab size="small">
<PrefixIcon svg={<IconBellFill />} />
알림 설정
</ExtendedFab>
);
}Neutral Solid
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
export default function ExtendedFabNeutralSolid() {
return (
<ExtendedFab variant="neutralSolid">
<PrefixIcon svg={<IconBellFill />} />
알림 설정
</ExtendedFab>
);
}Layer Floating
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
export default function ExtendedFabLayerFloating() {
return (
<ExtendedFab variant="layerFloating">
<PrefixIcon svg={<IconBellFill />} />
알림 설정
</ExtendedFab>
);
}Last updated on