UDButton text uppercase

Universal Dashboard Universal Dashboard Help
1

Is there a reason that the text for an UDButton is forced to be in uppercase?
I dont see a need for this, as in some cases uppercase is not needed.

image

 New-UDButton -Text 'Create' -Icon (New-UDIcon -Icon plus_circle -Color white -Size 'lg') -Style @{'background-color' = 'green'} -OnClick (...)```
2

It’s just a style applied by Material UI: https://material-ui.com/components/buttons/

When we get theming there, you should be able to adjust that.

3

isnt this currently possible using the -Style? Can someone point me to the right attribute?

4

The same with New-UDTab -Text 'Overview'

image

5

There’s a couple of ways using styles, you can apply the style directly to the button using -Style or you can put the button as content of the New-UDStyle command. Here’s a couple of examples:

New-UDButton -Text “hello” -Style @{
‘text-transform’=‘lowercase’
}

New-UDStyle -Style ’
.btn {
text-transform : capitalize;
}’ -Content {
New-UDButton -Text “hello again”
}

Of course the style hashtable can be set as a variable and used for multiple objects if that works better.
You can use ‘uppercase’, ‘lowercase’ and ‘capitalize’ as values.

Hope that helps.

2 Likes
6

Thanks for this answer :slight_smile:

7

For displaying a nicely integrated text button into a grid you can also set the display property from middle (default) to contents to get the “normal” left text align. You can also specify more css styling options, too.

Example from my test environment:

# Styling options for the ud buttons used in grids
$Cache:ButtonTextStyle = @{
    'display'        = 'contents'
    'text-transform' = 'none'
    'font-family'    = '"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif'
    'font-size'      = '15px'
    'line-height'    = '22.5px'
    'height'         = 'auto'
}
# Button in Grid
New-UDButton -Flat -Style $Cache:ButtonTextStyle -Text $_.Name -OnClick
{
    Show-UDModal -Header { New-UDHeading -Size 5 -Text "Description for User '$($_.SamAccountName)'" } -Content
    {
        New-UDRow -Columns
        {
            New-UDColumn -Size 8 -Content
            {
                if ($_.Description)
                {
                    $_.Description
                }
                else
                {
                    "No Description"
                }
            }
            New-UDColumn-Size 8 -Content
            {
                New-UDButton -Text "Close" -OnClick { Hide-UDModal }
            }
        }
    }
}

Result in my use case:

button
button2134×1124 1.05 MB