Cyber Monday's here! Create an app and enjoy 50% off now!

Border atom

Atomic Components

The border atom defines the properties of the outline of an element, such as its color and size. It helps highlight the shape that has been applied to the component.

JSON

Here’s the JSON format of this object :

{

"color": COLOR OBJECT,

"size": INTEGER // Line width in pixels, default value is 1

}

Documentation

Default value

By default, the Atom Border value is 1px, but it can be customized in the JSON. It can also vary depending on the settings of the predefined themes.

Example of the application of the border atom

Example of the application of the border atom

Behavior

Some components can receive different contour sizes depending on their condition.

Below, the behavior of a Textfield going from an Inactive state to Active

Border on text field state

Border on text field state

Distribution

Certain components won’t be able to receive the Atom on their 4 sides

Border on navigation elements

Border on navigation elements

Example