diff --git a/src/elements/Pill/Pill.stories.tsx b/src/elements/Pill/Pill.stories.tsx
index ead06291..d4487b0e 100644
--- a/src/elements/Pill/Pill.stories.tsx
+++ b/src/elements/Pill/Pill.stories.tsx
@@ -106,5 +106,17 @@ storiesOf("Pill", module)
)
})
+ .add("Onboarding", () => {
+ return (
+
+
+ Yes, I love collecting art
+
+
+ No, I'm just starting out
+
+
+ )
+ })
const src = "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg"
diff --git a/src/elements/Pill/Pill.tsx b/src/elements/Pill/Pill.tsx
index 1430f7ed..67b2d658 100644
--- a/src/elements/Pill/Pill.tsx
+++ b/src/elements/Pill/Pill.tsx
@@ -16,6 +16,7 @@ export const PILL_VARIANT_NAMES = [
"filter",
"profile",
"search",
+ "onboarding",
] as const
export type PillState = "default" | "selected" | "disabled"
export type PillVariant = typeof PILL_VARIANT_NAMES[number]
@@ -28,7 +29,10 @@ export type PillProps = (FlexProps & {
}) &
(
| {
- variant?: Extract
+ variant?: Extract<
+ PillVariant,
+ "default" | "filter" | "badge" | "search" | "dotted" | "onboarding"
+ >
src?: never
}
| { variant: Extract; src?: string }
@@ -126,6 +130,15 @@ const PILL_STATES = {
const PILL_VARIANTS: Record>> = {
default: PILL_STATES,
+ onboarding: {
+ ...PILL_STATES,
+ default: css`
+ ${PILL_STATES.default}
+ border-radius: 20px;
+ height: 40px;
+ border-color: ${themeGet("colors.black60")};
+ `,
+ },
dotted: {
...PILL_STATES,
default: css`
@@ -193,6 +206,7 @@ const defaultColors: Record = {
}
const TEXT_COLOR: Record> = {
default: defaultColors,
+ onboarding: defaultColors,
dotted: {
...defaultColors,
selected: "black100",