Several components within EUIKit use a type
attribute to specify the type or color of the component. EUIKit supports a small,
semantic set of types, the entire TailwindCSS palette, and an optional EUIKit "Extended
Palette".
Some of these types are not necessarily appropriate for each component (for example, you probably wouldn't use an alert with a type of "delete") but they are supported.
type="danger"
|
Danger | Danger | |
type="delete"
|
Are you sure? |
Delete | Delete |
type="error"
|
Error | Error | |
type="info"
|
Info | Info | |
type="primary"
|
Primary | Primary | |
type="success"
|
Success | Success | |
type="warning"
|
Warning | Warning | |
type="light"
|
Light | Light | |
type="dark"
|
Dark | Dark | |
type="link"
|
Link | Link | |
type="ghost"
|
Ghost | Ghost |
EUIKit supports the full Tailwind palette for any component that supports
the type attribute:
type="red"
|
Red | Red | |
type="orange"
|
Orange | Orange | |
type="amber"
|
Amber | Amber | |
type="yellow"
|
Yellow | Yellow | |
type="lime"
|
Lime | Lime | |
type="green"
|
Green | Green | |
type="emerald"
|
Emerald | Emerald | |
type="teal"
|
Teal | Teal | |
type="cyan"
|
Cyan | Cyan | |
type="sky"
|
Sky | Sky | |
type="blue"
|
Blue | Blue | |
type="indigo"
|
Indigo | Indigo | |
type="violet"
|
Violet | Violet | |
type="purple"
|
Purple | Purple | |
type="fuchsia"
|
Fuchsia | Fuchsia | |
type="pink"
|
Pink | Pink | |
type="rose"
|
Rose | Rose | |
type="slate"
|
Slate | Slate | |
type="gray"
|
Gray | Gray | |
type="zinc"
|
Zinc | Zinc | |
type="neutral"
|
Neutral | Neutral | |
type="stone"
|
Stone | Stone |
EUIKit ships with an optional extended palette you can use in your apps, based on the 12-bit rainbow palette by Kate Morley.
To install this extended palette for use in your own apps, see the Extended Palette page.
type="plum"
|
Plum | Plum | |
type="mulberry"
|
Mulberry | Mulberry | |
type="coral"
|
Coral | Coral | |
type="tangerine"
|
Tangerine | Tangerine | |
type="sunflower"
|
Sunflower | Sunflower | |
type="grass"
|
Grass | Grass | |
type="jade"
|
Jade | Jade | |
type="turquoise"
|
Turquoise | Turquiose | |
type="electric"
|
Electric | Electric | |
type="cerulean"
|
Cerulean | Cerulean | |
type="sapphire"
|
Sapphire | Sapphire | |
type="amethyst"
|
Amethyst | Amethyst |