UWD: Component

Light and Dark Themes

For this button component, we don't use any light or dark themes, rather one universal theme that is used for both light and dark themes.

Active State

Primary Action

Light theme

Primary Action

Dark theme

Primary Action

Your system theme

Disabled State

Primary Action

Light theme

Primary Action

Dark theme

Primary Action

Your system theme

Changing Colour of Components

In the demos above, the primary colour for them is set by the page's root CSS variable --ANUWD-01-variables-primary-colour: #007bff; which is set to #007bff (blue). You can change this colour to any colour and all of those components on that page will be that colour.

You can also set individual component to different colours by setting the inline style of the component container (div, section, label, form, etc) to the desired colour by style="--ANUWD-01-variables-primary-colour: #ff0000;" where #ff0000 (red) is the desired colour. This will only change the colour of that component that are inside that container.

This also means if you want to change multiple components in the same container to different colour, you can do so by setting the container's inline style to style="--ANUWD-01-variables-primary-colour: #00ff00;" where #00ff00 (green) is the desired colour for those components. This will only change the colour of that components that are inside that container.

Here's an example of how to set the colour of the component using the inline style attribute in the component container (in this case, the label element):

Primary Action

Light theme

Primary Action

Dark theme

Primary Action

Your system theme

We set these colours of cyan, yellow and magenta using the inline style attribute in the button element of the component. You can change these colours to any colour you want by changing the value of the --ANUWD-01-variables-primary-colour: {colour} where {colour} is the desired colour in hex format (e.g. #00FFFF for cyan). You can also invert the icon colour by setting the data-ANUWD-01-icon-colour-filter-type="none" attribute on the button element. This will change the icon colour to the invert of the colour which may be useful if the icon is not visible against some background colours. Your icon colours depends on the image of the icon you use, so make sure the icon image is suitable for the colour you choose. You can change the text colour with --ANUWD-01-variables-primary-button-text-colour: {colour} where {colour} is the desired text colour in hex format (e.g. #2f2f2f for dark grey).

Rounded Corners

You can also change the radius (roundness) of the corners of the button by changing the --ANUWD-01-variables-button-border-radius-scale variable in the container of the component or in the button. In this demo we applied it to this section div so all buttons inside this section will have the same border radius. This can be done by style="--ANUWD-01-variables-button-border-radius-scale: 50px;" where 50px is the desired border radius in pixels. You can also use other units like em, %, rem, etc. The default value is 15px which is the default border radius of the button.

Primary Action

Light theme

Primary Action

Dark theme

Primary Action

Your system theme

Customisable Attributes

These customisation is also possible for other attributes:

• --ANUWD-01-variables-primary-colour - to change the primary colour of the component (default is #007bff - blue).
• --ANUWD-01-variables-primary-focous-ring-thickness - to change the thickness of the focus ring around the button when it is focused (set to 0 to disable).
• --ANUWD-01-variables-primary-focous-ring-colour - to change the colour of the focus ring around the button when it is focused.
• --ANUWD-01-variables-button-width - to change the width of the button.
• --ANUWD-01-variables-button-height - to change the height of the button.
• --ANUWD-01-variables-button-border-radius-scale - to change the border radius (roundness) of the button.
• --ANUWD-01-variables-component-scale - to change the scale of the component (default is 1, 0.5 for half size, 2 for double size, etc).
• --ANUWD-01-variables-icon-size - to change the size of the icon inside the button.

Copyright Notice

All UI components, designs, and assets on this site are © 2025 Alam Network. They are the exclusive property of Alam Network. Use of any part of this guide without express written permission is strictly prohibited. The buttons, toggles, icons, and other UI elements you see here are part of Alam Network’s copyrighted design system. You need a valid license or written consent from Alam Network to use them in any project.