Outline

Atomic props for controlling the stack order of an element.

Atomic Props	CSS Properties
outlineNone	outline: none;
outline={value}	outline: {value};

None Outline

Use outlineNone props to remove outline of an element.

Result

Loading...

Live Editor

<Box toEvenly> <Input p2 bgGray200 placeholder="default input" /> <Input p2 outlineNone bgGray200 placeholder="none outline" /> </Box>

<Box toEvenly>
  <Input p2 bgGray200 placeholder="default input" />
  <Input p2 outlineNone bgGray200 placeholder="none outline" />
</Box>

Set Outline

Use outline props to set outline for an element.

Result

Loading...

Live Editor

<Box toEvenly> <Input p2 bgGray200 placeholder="default input" /> <Input p2 bgGray200 outline--focus="2px dotted red" placeholder="outline on focus" /> </Box>

<Box toEvenly>
  <Input p2 bgGray200 placeholder="default input" />
  <Input p2 bgGray200 outline--focus="2px dotted red" placeholder="outline on focus" />
</Box>