Extended FAB (Deprecated)
Use contextual-floating-button instead.
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 | Default |
|---|---|---|
variant? | "neutralSolid" | "layerFloating" | neutralSolid |
size? | "small" | "medium" | medium |
asChild? | boolean | false |
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